vue如何使用富文本编辑器wangEditor自定义图片上传（解决跨域问题）

1. html定义一个装编辑器的DIV

   <template>
       <div id="editor"></div>
   </template>
   复制代码

2. npm安装wangEditor

   npm install wangeditor --save  /*wangeditor须要小写*/
   复制代码

3. vue页面导入wangEditor

   import Editor from 'wangeditor' 
   export default {
       data () {
           return {
               editor: ''
           } 
       }
   }
   复制代码

4. vue页面实例化wangEditor

   methods: { 
       async initEditor () { 
           this.editor = new Editor('#editor') /* 括号里面的对应的是html里div的id */
           /* 配置菜单栏 */  
           this.editor.customConfig.menu = [
               'head',  // 标题
               'bold',  // 粗体
               'fontSize',  // 字号
               'fontName',  // 字体
               'italic',  // 斜体
               'underline',  // 下划线
               'strikeThrough',  // 删除线
               'foreColor',  // 文字颜色
               'backColor',  // 背景颜色
               'link',  // 插入连接
               'list',  // 列表
               'justify',  // 对齐方式
               'quote',  // 引用
               'emoticon',  // 表情
               'image',  // 插入图片
               'table',  // 表格
               'code',  // 插入代码
               'undo',  // 撤销
               'redo'  // 重复
           ]    
           this.editor.customConfig.uploadImgMaxLength = 5 / 限制一次最多上传 5 张图片 */ 
           this.editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024 /* 将图片大小限制为 3M 默认为5M / 
           /* 自定义图片上传（支持跨域和非跨域上传，简单操做）*/ 
           this.editor.customConfig.customUploadImg = async (files, insert) => { 
               /* files 是 input 中选中的文件列表 */ 
               let formData = new FormData() 
               formData.append('file', files[0]) 
               let data = await this.upload(formData) 
               /* upload方法是后台提供的上传图片的接口 */
               /* insert 是编辑器自带的 获取图片 url 后，插入到编辑器的方法 上传代码返回结果以后，将图片插入到编辑器中*/ 
               insert(data.imgUrl)
           } 
           this.editor.customConfig.onchange = (html) => {
               /* html 即变化以后的内容 */ 
           } 
           this.editor.create() /* 建立编辑器 */ 
       } 
   }
   复制代码

5. 渲染富文本编辑器

   mounted () {
      this.initEditor()
   }
   复制代码