在vue中使用wangeditor(含图片上传)

1.使用npm下载

npm install wangeditor

2.在使用的项目的组件中引入

import E from ‘wangeditor’

3.在当前组件中mounted中写入方法

// 富文本编辑器

 create(){     

        this.editor = new E("#editor");     

        this.editor.customConfig.menus = [         

          // 菜单配置（因为在最新版的wangeditor中不能让功能图标换行，可以视情况而定删除功能）       

            'head',  // 标题       

            'bold',  // 粗体       

            'fontSize',  // 字号       

             'fontName',  // 字体       

             'italic',  // 斜体       

             'underline',  // 下划线       

             'strikeThrough',  // 删除线       

             'foreColor',  // 文字颜色       

             'link',  // 插入链接       

             'list',  // 列表       

             'justify',  // 对齐方式       

            'image',  // 插入图片       

            'table',  // 表格            

           'undo',  // 撤销     

          'redo'  // 重复     

     ]   

    this.editor.customConfig.customUploadImg = function (files, insert) {     

      // files 是 input 中选中的文件列表     

     // insert 是获取图片 url 后，插入到编辑器的方法     

    files.forEach((item) => {       

       let fd = new FormData();       

       fd.append('file', item); // 上传的文件： 键名，键值     

       // 以下是上传图片的接口，视情况而更改就可以啦                                                     teachService.FileUploadInTencent(fd).then((data) => {       

     // 上传代码返回结果之后，将图片插入到编辑器中       

        insert(data.url)     

           })     

      })   

   };     

 // 创建富文本实例      

  this.editor.create()   

   if (!this.content) {       

         this.editor.txt.html('请编辑内容')     

  }

在需要富文本编辑器时，this.create() 调用

4.在组件中的里

<div id="editor">

 </div>