记录vue+element项目使用wangEditor富文本教程

贴一下官方地址 https://www.wangeditor.com/
项目需求:写一个上传文章的功能

本文中实现的功能:

• 富文本中上传图片到服务器,服务器返回一个地址,并展示在富文本中(图片是base64格式)
• 富文本内容回显

上代码
所有的配置都需要在.editor.create()之前

data() {
    return {
      editor: null,
    };
  },

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

创建实例与上传图片 函数写在mounted函数里面

    getEditor() {
      
       this.editor.txt.html(); //获取富文本内容
    },
    clearnText() {
      this.editor.$txt.html("<p><br></p>"); //清空内容
    },
    setText(val) {
      editor.txt.html(val); // 重新设置编辑器内容
    },
 editorCreate() {
      this.editor = new E("#editor");
      this.editor.config.menus = [
        // 菜单配置
        "head", // 标题
        "bold", // 粗体
        "fontSize", // 字号
        "fontName", // 字体
        "italic", // 斜体
        "underline", // 下划线
        "strikeThrough", // 删除线
        "foreColor", // 文字颜色
        "backColor", // 背景颜色
        "link", // 插入链接
        "list", // 列表
        "justify", // 对齐方式
        "quote", // 引用
        "emoticon", // 表情
        "image", // 插入图片
        "table", // 表格
        "code", // 插入代码
        "undo", // 撤销
        "redo", // 重复
      ];
      this.editor.config.height = 600;
      this.editor.config.pasteText = true; // 只粘贴纯文本
      this.editor.config.zIndex = 100;
      this.editor.config.uploadImgShowBase64 = false; // 使用 base64 保存图片
      this.editor.config.uploadImgMaxSize = 3 * 1024 * 1024; //限制图片大小
      this.editor.config.uploadImgServer = "xxx"; //上传图片地址
       this.editor.config.showLinkImg = false; // 隐藏“网络图片”tab
      this.editor.config.uploadImgHeaders = {
        Authorization: xxxxx // 设置请求头
      };
      this.editor.config.uploadFileName = "file"; //设置字段
      this.editor.config.uploadImgMaxLength = 10; // 限制一次最多上传 5 张图片
      this.editor.config.uploadImgTimeout = 3 * 60 * 1000; // 设置超时时间
      // this.editor.config.uploadImgHooks = {
      //   // 图片上传并返回结果，但图片插入错误时触发
      //   fail: function(xhr, editor, result) {
      //     console.log(result);
      //   },
      //   success: function(xhr, editor, result) {
      //     // 图片上传并返回结果，图片插入成功之后触发
      //     console.log(result, "success");
      //   },
      // };
      this.editor.config.uploadImgHooks = {
        fail: (xhr, editor, result) => {
          // 插入图片失败回调
        },
        success: (xhr, editor, result) => {
          // 图片上传成功回调
    
        },
 
        customInsert: (insertImg, result, editor) => {
          // 图片上传成功，插入图片的回调
          //result为上传图片成功的时候返回的数据，这里我打印了一下发现后台返回的是data：[{url:"路径的形式"},...] 
          let url = result.data.url;
          insertImg(url);
        },
      };
      this.editor.create();
    },

下面是回显的函数
正常情况获取后台返回的内容

this.editor.txt.html("写你回显的内容")