关于wangEditor富文本编辑器的使用,vue项目

1.安装富文本编辑器

npm install wangeditor --save
yarn add wangeditor --save							     //npm下载
https://unpkg.com/wangeditor/release/wangEditor.min.js   //cdn引入

2.构建html结构

<div class="editor" id="editor" ref="editor"></div>

3.js部分代码

<script>
	import E from 'wangeditor'
	export default {
    data(){
      return{
        editor : "",
      }
    },
    mounted() {
      this.editor = new E("#editor");//new即可
      //下面的为一些配置参数，默认全部都有，我们需要那些留下那些即可
         this.editor.customConfig.menus = [
           'head',  // 标题
           'bold',  // 粗体
           'fontSize',  // 字号
           'fontName',  // 字体
           'italic',  // 斜体
           'underline',  // 下划线
           'strikeThrough',  // 删除线
           'foreColor',  // 文字颜色
           //'backColor',  // 背景颜色
           //'link',  // 插入链接
           'list',  // 列表
           'justify',  // 对齐方式
           'quote',  // 引用
           //'emoticon',  // 表情
           'image',  // 插入图片
           'table',  // 表格
           //'video',  // 插入视频
           //'code',  // 插入代码
           //'undo',  // 撤销
           //'redo'  // 重复
         ];
         //聚焦时候函数
         this.editor.customConfig.onfocus = function () {
           //console.log("onfocus")
         };
         //失焦时候函数
         this.editor.customConfig.onblur = function () {
           //console.log("onblur")
         };
         //change事件，当富文本编辑器内容发生变化时便会触发此函数
         this.editor.customConfig.onchange = function (text) {
           console.log(text)
         };
         this.editor.customConfig.customUploadImg =  (files, insert) => {
           // files 是 input 中选中的文件列表
           // insert 是获取图片 url 后，插入到编辑器的方法
           files.forEach((item) => {
             let fd = new FormData();
             fd.append('upfile', item);
             console.log(item)
           })
         }
       this.editor.create();//以上配置完成之后调用其create()方法进行创建
</script>