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