Vue富文本编辑器wangeditor的简单使用，以及组件的封装，编辑的回显

简单的一个小项目完结，第一次用富文本简单记录总结一下~

纯个人理解

一、npm安装wangeditor

 npm install wangeditor@2.1.23 --save

我这里用的是指定版本，也可以不用指定，看个人喜好

二、在需要用到的地方引入

import E from "wangeditor";

三、创建一个用于初始化编辑器的DOM

      <el-form-item label="工作职责">
        <div ref="zhizein"></div>
      </el-form-item>

四、在methods里写初始化函数

initwangeditor() {
      this.editor = new E(this.$refs.zhizein); // 找到初始化的dom
      // 配置顶部菜单
      this.editor.config.menus = [
        "list", // 列表
        "justify", // 对齐方式
      ];
      // 编辑器编辑区域内容你变化时
      this.editor.config.onchange = (html) => {
        // 赋给data里的变量保存下来
        this.form.zhize = html; // html就是输入的内容(有格式的)
        // console.log(this.form.zhize, "this.form.zhize");
      };
      this.editor.config.zIndex = 1 // 因为有覆盖，设置了编辑的z-index
      // 创建富文本编辑器
      this.editor.create();
    },

五、在页面加载时初始化

  mounted() {
    this.initwangeditor();
  },

这样就可以有一个简单的富文本编辑器啦~

效果如图

 当然，在vue中最好是做成组件，上面的小例子仅仅是入门的使用方法，下面，我准备把他封装一下，争取拿来就能用。话不多说，上代码~

一、在components文件夹下新建wangEnduit.vue文件，内容如下：

可以直接CV，但请注意

将图片上传地址完善，大约在80行。

<template lang="html">
  <div class="editor">
    <div ref="toolbar" class="toolbar">
    </div>
    <div ref="editor" class="text">
    </div>
  </div>
</template>

<script>
import E from "wangeditor";

export default {
  name: "editoritem",
  data() {
    return {
      editor: null,
      info_: null,
    };
  },
  model: {
    prop: "value",
    event: "change",
  },
  // 接收父组件的传值
  props: {
    value: { // 输入的内容
      type: String,
      default: "",
    },
    isClear: { // 是否清空
      type: Boolean,
      default: false,
    },
    // 编辑时回显的内容
    contxt: {
      type: String,
      default: "",
    },
  },
  watch: {
    contxt(contxt) {
      // 在这里监听，如果说回显时，把回显的内容放到编辑区域
      if (contxt !== "") {
        this.editor.txt.html(this.contxt);
      }
    },

    isClear(val) {
      // 触发清除
      if (val) {
        this.editor.txt.clear();
        this.info_ = null;
      }
    },
    value: function (value) {
      // 当内容发生变化是
      if (value !== this.editor.txt.html()) {
        this.editor.txt.html(this.value);
      }
    },
  },

  mounted() {
    this.seteditor();
     // 可能是个无效的判断，因为要区分编辑（回显）跟新增
    if (this.contxt == "") {
      // console.log("这是在修改文章");
    } else {
      this.editor.txt.html(this.value);
    }
  },
  methods: {
    seteditor() {
        // 初始化一下
      this.editor = new E(this.$refs.toolbar, this.$refs.editor);
        // 这里是图片上传部分
        // 首先，把token拿出来
      let token = localStorage.getItem("token");

      this.editor.config.uploadImgShowBase64 = false; // base64格式
      this.editor.config.uploadImgServer = 后端文件上传地址; // 图片上传的地址，这个是后端写好的
      this.editor.config.uploadImgHeaders = {
        token,
        "Access-Control-Allow-Origin": "*",
      }// 请求头，因为第一次跨域了

      this.editor.config.uploadFileName = "file"; // 后端接受上传文件的参数名
      this.editor.config.uploadImgMaxSize = 2 * 1024 * 1024; // 图片大小限制为 2M
      this.editor.config.uploadImgMaxLength = 6; // 一次最多上传 3 张
      this.editor.config.uploadImgTimeout = 3 * 60 * 1000; // 超时

      // 配置富文本的菜单，或者叫功能
      this.editor.config.menus = [
        "head", // 标题
        "bold", // 粗体
        "fontSize", // 字号
        "fontName", // 字体
        "italic", // 斜体
        "underline", // 下划线
        "strikeThrough", // 删除线
        "foreColor", // 文字颜色
        "backColor", // 背景颜色
        "link", // 插入链接
        "list", // 列表
        "justify", // 对齐方式
        "quote", // 引用
        "emoticon", // 表情
        "image", // 插入图片
        "table", // 表格
        "video", // 插入视频
        "code", // 插入代码
        "undo", // 撤销
        "redo", // 重复
        "fullscreen", // 全屏
      ];

      this.editor.config.uploadImgHooks = {
        fail: (xhr, editor, result) => {
          // 插入图片失败回调
        },
        success: (xhr, editor, result) => {
          // 图片上传成功回调
        },
        timeout: (xhr, editor) => {
          // 网络超时的回调
        },
        error: (xhr, editor) => {
          // 图片上传错误的回调
        },

        customInsert: (insertImg, result, editor) => {
          // console.log(result, "result");
          //result为上传图片成功的时候返回的数据，这里我们需要后端返回的图片地址，输出一下就能拿到
          let url = result.data;
          insertImg(url);//图片的函数
        },
      };
      this.editor.config.onchange = (html) => {
        this.info_ = html; // 绑定当前逐渐地值
        this.$emit("change", this.info_); // 将内容同步到父组件中
      };
      // 创建富文本编辑器
      this.editor.create();
    },
  },
};
</script>

<style lang="css">
.editor {
  width: 100%;
  margin: 0 auto;
  position: relative;
  z-index: 0;
}
.toolbar {
  border: 1px solid #ccc;
}
.text {
  border: 1px solid #ccc;
  height: 500px;
  /*height: 500px; */
  overflow-y: auto;
}
</style>

组件整好了，接下来就是使用了

一、在要是用的地方引入、注册、使用

import EditorBar from "@/components/wangEnduit";

  components: {
    EditorBar,
  },

 data：

 data() {
    return {
      detail: "",
      isClear: false,
      news: '',
    }
  };

change方法

    change(val) {
      // console.log(val, 'valFu')
      // val就是我们要的了
      this.news = val;
    },

这一步完成后，就会在页面上看到编辑器的样式啦~~

 那么怎么发布文章呢？

首先，定义一个方法

    // 新增文章
    fabu() {
      // console.log(this.news,'news')
      // 根据自己接口实际配置请求参数

      let query = {
        content: this.news,// 文章内容
        // 还有包括类型、标题等等请自己配置
      };
      // console.log(query,'query')

      // 这里是添加的请求，例如，纯手写可能有错
      axios({
        url:'',
        method:'post',
        data:query,
        headers:{}
      }).then(res =>{
        // 看看返回
        console.log(res,'add news res')
      });

    },

 然后点击触发，当然一些验证没有做，请自行完善

        <el-button type="primary" @click="fabu">新增</el-button>

最后，我们说一说回显，组件内有回显的处理，那么怎么触发呢~

我的回显操作，是在新闻列表页面，需要几步就能完成回显

1、拿到新闻的文章内容

2、传给子组件

这样回显就完成了，回显后再编辑

3、给组件的@change事件定义方法，这个方法的主要目的就是，子组件内监听内容变化

4、在刚刚定义的方法里，将编辑内容重新赋值给新闻的文章内容，（第一步）

5、在保存按钮上自定一个方法，向后端写好的接口发送请求，最新的文章内容就是，第三步方法里的文章内容

首先先看data:

  data() {
    return {
      // 要回显的新闻
      updateone: {},
      // 控制遮罩
      maskindex: 1,
    };
  },

这是我的第一步，在新闻列表里拿到完整新闻（scope.row）

<el-table-column label="操作" align="center">
      <template #default="scope">
          <el-button
            type="text"
            icon="el-icon-setting"
            @click="showmask(scope.row)"
           >修改</el-button
         >
       </template>
  </el-table-column>

showmask:

    showmask(row) {
      // console.log(row, "row");
      this.maskindex = 0;
      this.updateone = row;
    },

这样就能打开我的遮罩层啦~，这里是我再次引用了组件，如果直接看到这里不明白的话，往上看看组件的使用就好了

    <!-- 编辑mask -->
    <div class="mask" v-show="maskindex == 0">
      <div class="maskcon">
        <div class="cotent">
          <p style="magrin: 10px 0">内容：</p>
          <div>
            <editor-bar
              v-model="detail"
              :isClear="isClear"
              <--这个注释会报错，删掉就行，这里把文章的内容传给了子组件-->
              :contxt="updateone.content"
              <--这个注释会报错，删掉就行，回显完后再次编辑-->
              @change="change"
            ></editor-bar>
          </div>
        </div>

再次编辑的chage事件：

    change(val) {
      // val:修改后的文章内容
      this.updateone.content = val;
    },

最后发送请求保存下来就好啦