Vue 中 wangEditor 富文本编辑框的使用

官网地址：wangEditor

安装依赖 npm i @wangeditor/editor

封装wangeditor.vue组件,

<template>
  <div style="border: 1px solid #ccc;">
    <Toolbar
      ref="toolbar"
      style="border-bottom: 1px solid #ccc"
      :editor="editor"
      :defaultConfig="toolbarConfig"
      :mode="mode"
    />
    <Editor
      style="height: 500px; overflow-y: hidden;"
      v-model="html"
      :defaultConfig="editorConfig"
      :mode="mode"
      @onCreated="onCreated"
      @onChange="onChange"
    />
  </div>
</template>
<script>
import Vue from "vue";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
export default Vue.extend({
  components: { Editor, Toolbar },
  props: {
    readOnly: {
      //是否只读
      type: Boolean,
      default: () => {
        return false;
      }
    }
  },
  data() {
    return {
      editor: null,
      html: "",
      toolbarConfig: {
        excludeKeys: [
          "insertVideo",
          "uploadVideo",
          "group-video",
          "emotion" // 排除菜单组，写菜单组 key 的值即可
        ]
      },
      // editorConfig: { placeholder: '请输入内容...' ,},
      // editorConfig: { MENU_CONF: {}, IEditorConfig: {}, readOnly: true },
      mode: "default", // or 'simple'
      customParseImageSrc: ""
    };
  },
  computed: {
    editorConfig() {
      return { MENU_CONF: {}, IEditorConfig: {}, readOnly: this.readOnly };
    }
  },
  created() {
    // let that = this;
    // that.editor.$textElem.attr("contenteditable", false);
    this.editorConfig.MENU_CONF["uploadImage"] = {
      server: "/rcep/common/uploadImage", //上传文件接口
      // form-data fieldName ，默认值 'wangeditor-uploaded-image'
      fieldName: "file",

      // 单个文件的最大体积限制，默认为 2M
      maxFileSize: 1 * 1024 * 1024, // 1M

      // 最多可上传几个文件，默认为 100
      maxNumberOfFiles: 10,

      // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
      allowedFileTypes: ["image/*"],

      // 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。
      // meta: {
      //     token: 'xxx',
      //     otherKey: 'yyy',
      //     type:'P'
      // },

      // 将 meta 拼接到 url 参数中，默认 false
      metaWithUrl: false,

      // 自定义增加 http  header
      headers: {
        Accept: "*/*",
        token: sessionStorage.getItem("token") || "",
        type: "P"
      },

      // 跨域是否传递 cookie ，默认为 false
      withCredentials: true,
      // base64LimitSize: 5 * 1024 ,// 5kb
      // 超时时间，默认为 10 秒
      timeout: 5 * 1000, // 5 秒
      // parseImageSrc: 'http://172.26.171.64:8089/rcep/common/attachment/2395738323650871296', // 也支持 async 函数
      // 自定义插入图片
      customInsert(res, insertFn) {
        // res 即服务端的返回结果
        // 从 res 中找到 url alt href ，然后插图图片
        insertFn(res.data.fileUrl);
      },
      // 单个文件上传成功之后
      onSuccess(file, res) {},
      // 单个文件上传失败
      onFailed(file, res) {
        that.customParseImageSrc = res.data.fileUrl;
        that.$message.error(res.data.fileUrl);
        //  insertFn(res.data.fileUrl, alt, href)
      }
    };
  },
  methods: {
    onCreated(editor) {
      this.editor = Object.seal(editor); // 一定要用 Object.seal() ，否则会报错
    },
    getDtail(details) {
      this.html = details;
    },
    onChange(editor) {
      this.$emit("catchData", this.editor.getHtml());
    }
  },
  mounted() {},
  beforeDestroy() {
    const editor = this.editor;
    if (editor == null) return;
    editor.destroy(); // 组件销毁时，及时销毁编辑器
  }
});
</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>

在父组件中使用

<template>
  <basic-container>
    <editer @catchData="catchData" ref="childref"></editer>
    <div class="btn">
      <el-button type="primary" @click="saveHandle">保 存</el-button>
    </div>
  </basic-container>
</template>
<script>
import editer from "@/components/wangeditor.vue";
export default {
  components: { editer },
  data() {
    return {
      content: "<p>我爱你祖国</p>"
    };
  },
  mounted() {
    if (this.$refs.childref) {
      // 删除不需要的功能,如无需删除功能块便不写
      this.$refs.childref.$refs.toolbar.defaultConfig.excludeKeys = [
        "codeBlock", //代码块
        "insertTable", //表格
        "insertLink", //链接
        "insertImage", //图片
        "group-image", //图片
        "uploadImage", //图片
        "insertVideo", //视频
        "uploadVideo", //视频
        "group-video", //视频
        "emotion"
      ];
      this.$refs.childref.getDtail(this.content);// 给富文本编辑框赋值，可有可无
    }
  },
  methods: {
    saveHandle() {
      console.log(this.content);
    },

    catchData(data) {
      this.content = data;//将富文本编辑器里的内容给应当绑定的变量content
    }
  }
};
</script>
<style lang="scss">
.btn {
  padding-top: 10px;
  text-align: center;
}
</style>