【vue2中使用wangeditor5】

---

前言

第一次在vue项目用wangEditor，记录一下，写的不顺的，写的慢的

---

一、wangEditor五，如何引入vue（5.1.23）？

这部分直接看官网

yarn add @wangeditor/editor
# 或者 npm install @wangeditor/editor --save

yarn add @wangeditor/editor-for-vue
# 或者 npm install @wangeditor/editor-for-vue --save

下好后，你的package.json里面就因该会有，这两个

"dependencies": {
    "@wangeditor/editor": "^5.1.23",
    "@wangeditor/editor-for-vue": "^1.0.2",
  },

二、把wangEditor整个组件

template

<template>
  <div>
    <div
    //因为我要修改样式，所以直接用的props，宽高边框什么的都可以传
      :style="{
        overflow: outerHidden,
        width: outerWidth + 'px',
        border: border,
        borderRadius: borderRadius,
      }"
      //这个是有个需求是要禁用
      @click="isKey()"
    >
    //俩官方组件，工具栏，跟编辑区
      <Toolbar
        :style="{
          borderBottom: borderBottom,
          height: heightT + 'px',
          display: display,
          justifyContent: justifyContent,
          backgroundColor: backgroundColor,
        }"
        //
        :editor="editor"
        //工具栏配置，配置你想要什么功能，我这里就用了俩，上标下标
        :defaultConfig="toolbarConfig"
        //模式选择，一共俩种，默认跟简洁，这里是简洁
        :mode="mode"
      />
      <Editor
        :style="{
          height: height + 'px',
          width: width + 'px',
          overflowY: hidden,
          fontSize: fontSize + 'px',
        }"
        //编辑区设置，默认显示，最大长度，以及输入后显示什么样的字体样式，大小
        :defaultConfig="editorConfig"
        //创建完了就调用这个
        @onCreated="onCreated"
        :mode="mode"
        //内容改变时
        @onChange="onChange"
        //选中时
        @onFocus="onFocus"
        //这个就是接受父给子传递的数据，我又用计算属性包了下
        v-model="sendData"
        //点击离开时
        @onBlur="onBlur"
        //自己定义粘贴逻辑
        @customPaste="customPaste"
        //最大输入的字符，比如你限制了来个字符，输到俩个时调用
        @onMaxLength="onMaxLength"
        //选中的悬浮菜单，简洁的就默认没了
        @customAlert="customAlert"
      />
    </div>
  </div>
</template>

script

<script>
//这俩的得导入
import Vue from "vue";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
export default Vue.extend({
  components: { Editor, Toolbar },
  computed: {
    sendData: {
      get() {
        return this.contentHtml;
      },
      set(value) {},
    },
    //这个是为了限制字符，因为有多个而且每个的限制字符还不一样，这样每用一个你可以根据需求传入
    editorConfig() {
      return {
        maxLength: this.maxLength,
      };
    },
  },
  data() {
    return {
      editor: null,
      //
      toolbarConfig: {
      //上标，下标
        toolbarKeys: ["sup", "sub"],
      },
      mode: "simple",
      fontSize: 16,
      //这个与下边监听的进行对比来判断是否禁用
      isUnbind: 1,
    };
  },
  watch: {
    isRelieve(newValue, oldValue) {
    //这里就完全看各自的需求了
      if (newValue === 8) {
        this.editor.enable();
      } else {
        this.editor.disable();
        this.isUnbind = oldValue;
      }
    },
  },
  created() {},
  methods: {
    isKey() {
      // 点击判，是否进入
      if (this.isRelieve !== undefined && this.NextG === this.isRelieve) {
        this.editor.enable();
        this.editor.focus();
      }
    },
    onChange(editor) {
    //发送个父数据跟每个的id
      this.$emit("getTextContent", editor.getHtml(), editor.id);
    },
    onFocus(editor) {
      this.$emit("isShow", editor.getHtml());
    },
    customAlert(info, type) {
      window.alert(`\n${type}:\n${info}`);
    },
    onMaxLength(editor) {
      console.log("onMaxLength", editor);
    },
    onBlur(editor) {
      this.$emit("getIsShow");
    },
    onCreated(editor) {
      this.editor = Object.seal(editor); // 一定要用 Object.seal() ，否则会报错
      if (this.isEdit == true) {
        editor.disable();
      }
      if (this.isEditor == false) {
        editor.disable();
      }
    },
    customPaste(editor, event) {
      const text = event.clipboardData.getData("text/plain"); // 获取粘贴的纯文本
      editor.insertText(text);
      // 阻止默认的粘贴行为
      event.preventDefault();
      return false;
    },
  },
  beforeDestroy() {
    const editor = this.editor;
    if (editor == null) return;
    editor.destroy(); // 组件销毁时，及时销毁编辑器
  },
  props: {
    // 最大字数限制
    maxLength: {
      type: Number,
      default: 0,
    },
    backgroundColor: {
      default: "#f2f2f0",
    },
    justifyContent: {
      default: "end",
    },
    display: {
      default: "flex",
    },
    borderBottom: {
      default: "1px solid #ccc",
    },
    heightT: {
      default: 30,
    },
    border: {
      type: String,
      default: "1px solid #ccc",
    },
    borderRadius: {
      type: String,
      default: "4px",
    },
    outerHidden: {
      type: String,
      default: "hidden",
    },
    outerWidth: {
      type: Number,
    },
    height: {
      type: Number,
    },
    width: {
      type: Number,
    },
    hidden: {
      type: String,
      default: "hidden",
    },
    contentHtml: {
      type: String,
      default: "",
    },
    isEdit: {
      type: Boolean,
      default: false,
    },
    isEditor: {
      type: Boolean,
      default: true,
    },
    isRelieve: {
      type: Number,
    },
    NextG: {},
  },
});
</script>

样式就不贴了，别忘了引入官方的样式

<style src="@wangeditor/editor/dist/css/style.css"></style>

---

总结

写的时候，一个一个需求的来感觉真难受，写完感觉就这，用完之后，还是感觉这些作者们厉害啊