vue3中使用富文本

注：参考：

https://www.wangeditor.com/;

1、导入一下内容：
npm install @wangeditor/editor --save
npm install @wangeditor/editor-for-vue@next --save
还有就是在package.json中添加并下载："@tinymce/tinymce-vue": "^6.1.0",不然输入中文报错

2、在需要用到的地方使用：
标签：
 <editor v-model="ruleForm.tushuContent" @input="handleEditorInput"></editor>
引用：
import editor from "@/components/common/Editor.vue";
export default {
components: {
    editor
  },
}
对应js：
handleEditorInput(newContent) {
//其中this.ruleForm.tushuContent更换为你的字段属性
      this.ruleForm.tushuContent = newContent;
    },

3、富文本组件：
<template>
  <div>
    <div style="border: 1px solid #ccc">
      <Toolbar
          style="border-bottom: 1px solid #ccc"
          :editor="editorRef"
          :defaultConfig="toolbarConfig"
          :mode="mode"
      />
      <Editor
          style="height: 500px; overflow-y: hidden;"
          ref="editorRef"
          v-model="valueHtml"
          :defaultConfig="editorConfig"
          :mode="mode"
          @onCreated="handleCreated"
          @onChange="handleChange"
          @onDestroyed="handleDestroyed"
          @onFocus="handleFocus"
          @onBlur="handleBlur"
          @customAlert="customAlert"
          @customPaste="customPaste"
      />
    </div>
  </div>
</template>

<script>
import '@wangeditor/editor/dist/css/style.css'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'

export default {
  components: { Editor, Toolbar },
  props: {
    modelValue: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      editorRef: null,
      toolbarConfig: {excludeKeys: ['insertLink', 'group-image', 'group-video']},
      editorConfig: {placeholder: '请输入内容...',},
      mode: 'default', 
      valueHtml: '' 
    };
  },
  watch: {
    modelValue(newVal) {
      this.valueHtml = newVal;
    },
    valueHtml(newVal) {
      this.$emit('update:modelValue', newVal);
    }
  },
  methods: {
    handleCreated(editor) {
      this.editorRef = editor;
      if (this.modelValue) {
        editor.children.html(this.modelValue);
      }
    },
    handleChange(newHtml) {
    },
    handleDestroyed(editor) {
    },
    handleFocus(editor) {
    },
    handleBlur(editor) {
    },
    customAlert(info, type) {
      alert(`【自定义提示】${type} - ${info}`);
    },
    customPaste(editor, event, callback) {
      event.preventDefault();
      callback(false);
    }
  },
  mounted() {
    this.valueHtml = this.modelValue;
  },
  beforeDestroy() {
    if (this.editorRef) {
      this.editorRef.destroy();
    }
  }
};
</script>

注意1：给富文本的写法是vue2的写法，但部分vue3也适用，如果用不成考虑适用Ai将整个内容转化为使用vue3的写法即可.
注意2：其中链接+图片+视频会报错我给隐藏了，想用的你们可以研究一下，最上面的链接是官网