在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.在组件中的<template>里

<el-form-item prop="txtContent" label="教学内容">

    <div id="editor">

     </div>

</el-form-item>