1. wangEditor4介绍

wangEditor4 —— 轻量级 web 富文本编辑器，配置方便，使用简单。支持 IE10+ 浏览器。

• 官网：www.wangEditor.com
• 文档：www.wangeditor.com/doc
• 源码：github.com/wangeditor-team/wangEditor

2. 下载

注意： wangeditor都是小写字母

npm install wangeditor

3. 定义编辑器子组件

• 创建富文本编辑器子组件 editor.vue

  template

  <template>
    <div class="editor" id="box"></div>
  </template>
  

  script

  import E from "wangeditor";
  export default {
    data() {
      return {};
    },
    mounted() {
      this.initE();
    },
    methods: {
      initE() {
        this.editor = new E("#box");
        //这里各位小伙伴可以查询官网，根据自己的需求进行菜单栏调整
        this.editor.config.menus = [
          "head", // 标题
          "bold", // 粗体
          "fontSize", // 字号
          "fontName", // 字体
          "italic", // 斜体
          "underline", // 下划线
          "strikeThrough", // 删除线
          "foreColor", // 文字颜色
          "backColor", // 背景颜色
          "link", // 插入链接
          "list", // 列表
          "justify", // 对齐方式
          "quote", // 引用
          "emoticon", // 表情
          "image", // 插入图片
          "table", // 表格
          "code", // 插入代码
          "undo", // 撤销
          "redo", // 重复
        ];
        //为true，则上传后的图片转为base64编码，为false,则上传图片到服务器，二者不能同时使用
        this.editor.config.uploadImgShowBase64 = false;
        //服务器接收的上传图片的属性名
        this.editor.config.uploadFileName = "file";
        //服务器上传图片的接口地址
        this.editor.config.uploadImgServer = `http://localhost:3000/upload`;
        // 默认限制图片大小是 5M ，可以自己修改。
        this.editor.config.uploadImgMaxSize = 2 * 1024 * 1024; // 2M
        // 限制类型,可自定义配置,默认为： ['jpg', 'jpeg', 'png', 'gif', 'bmp']
        this.editor.config.uploadImgAccept = ['jpg', 'jpeg',"png", "gif", "bmp", "webp"];
        //上传图片过程中钩子函数
        this.editor.config.uploadImgHooks = {
          // 上传图片之前
          before: function (xhr) {
            // console.log(xhr);
  
            // // 可阻止图片上传
            // return {
            //   prevent: true,
            //   msg: "需要提示给用户的错误信息",
            // };
          },
          // 图片上传并返回了结果，图片插入已成功
          success: function (xhr) {
            console.log("success", xhr);
          },
          // 图片上传并返回了结果，但图片插入时出错了
          fail: function (xhr, editor, resData) {
            console.log("fail", resData);
          },
          // 上传图片出错，一般为 http 请求的错误
          error: function (xhr, editor, resData) {
            console.log("error", xhr, resData);
          },
          // 上传图片超时
          timeout: function (xhr) {
            console.log("timeout");
          },
        };
      // 在输入内容时，把内容传给父组件
        this.editor.config.onchange = (html) => {
          this.$emit("change", html); // 将内容同步到父组件中
        };
        this.editor.create();
        //初始化富文本编辑器时显示的内容
        this.editor.txt.html("<h1>haha</h1>");
      },
    },
  };
  

4. 图片上传注意事项

4.1 响应数据格式要求

只有响应数据的格式符合下列要求，才会调用success和fail等回调函数

• 响应数据格式

{
    // errno 即错误代码，0 表示没有错误。
    //       如果有错误，errno != 0，可通过下文中的监听函数 fail 拿到该错误码进行自定义处理
    "errno": 0,

    // data 是一个数组，返回图片Object，Object中包含需要包含url、alt和href三个属性,它们分别代表图片地址、图片文字说明和跳转链接,alt和href属性是可选的，可以不设置或设置为空字符串,需要注意的是url是一定要填的。
    "data": [
        {
            url: "图片地址",
            alt: "图片文字说明",
            href: "跳转链接"
        },
        {
            url: "图片地址1",
            alt: "图片文字说明1",
            href: "跳转链接1"
        },
        "……"
    ]
}

• 回调函数

//上传图片过程中钩子函数
      this.editor.config.uploadImgHooks = {
        // 上传图片之前
        before: function (xhr) {
          // console.log(xhr);

          // // 可阻止图片上传
          // return {
          //   prevent: true,
          //   msg: "需要提示给用户的错误信息",
          // };
        },
        // 图片上传并返回了结果，图片插入已成功
        success: function (xhr) {
          console.log("success", xhr);
        },
        // 图片上传并返回了结果，但图片插入时出错了
        fail: function (xhr, editor, resData) {
          console.log("fail", resData);
        },
        // 上传图片出错，一般为 http 请求的错误
        error: function (xhr, editor, resData) {
          console.log("error", xhr, resData);
        },
        // 上传图片超时
        timeout: function (xhr) {
          console.log("timeout");
        },
      };

• express后端返回示例

  //图片上传
  router.post("/upload", upload.single("file"), (req, res) => {
      // 需要返回图片的访问地址    域名+上传文件夹+文件名
      const url = "http://localhost:3000/upload/" + req.file.filename
      res.json({ 
          errno: 0,
          "data": [
              {
                  url,
                  alt: '可爱',
                  href:"http://www.baidu.com"
              }
          ]
       })
  })
  

4.2 响应数据不符合格式要求

• express后端返回示例

  //图片上传
  router.post("/upload", upload.single("file"), (req, res) => {
      // 需要返回图片的访问地址    域名+上传文件夹+文件名
      const url = "http://localhost:3000/upload/" + req.file.filename
      res.json({url})
  })
  

• 自定义回调函数，插入图片

customInsert: function (insertImgFn, result) {
    //result为上传图片成功的时候返回的数据，这里我打印了一下发现后台返回的是data：[{url:"路径的形式"},...]
    // console.log(result.data[0].url)
    //insertImgFn()为插入图片的函数
    //循环插入图片
    // for (let i = 0; i < 1; i++) {
    // console.log(result)
    let url = "http://localhost:3000/upload/" + result.url;
    insertImgFn(url);
}

5. 其它API

• editor.txt.html() 设置编辑器内容。
• editor.txt.append('<p>追加的内容</p>') 继续追加内容。
• editor.txt.html() 获取 html
• editor.txt.clear() 清空编辑器内容。

6. 父组件使用富文本编辑器子组件

<template>
  <div id="app">
    <editor @change="change"></editor>
    <button @click="send()">提交</button>
  </div>
</template>

<script>
import editor from "@/views/editor.vue";
export default {
  components: { editor },
  data(){
    return {
      result: ''
    }
  },
  methods: {
    //提交富文本编辑器的内容
    send(){
      console.log('send',this.result);
    },
    change(html){
      this.result = html
    }
  }
  
};
</script>

<style lang="scss">
</style>