vue中引入富文本编辑器wangEditor

1.先安装 npm i wangeditor -S
2.引入wangeditor

import E from 'wangeditor'

3.代码如下
html

      <div id="editor" class="editor" ></div>
      <div class="content" v-html="editorContent" ></div>            
js
 mounted(){
        var editor = new E('#editor')
        editor.customConfig.onchange = (html) => {
        	this.editorContent = html;  //获取内容 包括样式
            this.info = editor.txt.text();  //获取文本
        }
       	editor.customConfig.uploadImgShowBase64 = true ;  //将上传图片转成base64
        editor.customConfig.linkImgCallback = function (url) {
            console.log(url) // url 即插入图片的地址
        }
         editor.customConfig.zIndex = 1; //改变编辑器的z-index  默认是100
        editor.create();
        
    },

如果要配置字体

editor.customConfig.fontNames = [
            '宋体',
            '楷体',
            '黑体',
            '隶书',
            '微软雅黑',
            'Arial',
            'Tahoma',
            'Verdana'
        ];

示例图如下:
在这里插入图片描述左边是富文本,右边是div

版权声明:本文为weixin_45000975原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_45000975/article/details/102840028