wangEdit大致使用

1、先导入，两种方式任选其一

yarn add @wangeditor/editor-for-vue@next
npm install @wangeditor/editor-for-vue@next --save

2、创建富文本框组件，以下是vue3.0的写法，万变不离其宗，大概改改就行了，注释也写进去了

<template>
  <div>
    <div style="border: 1px solid #ccc; margin-top: 10px">
      <Toolbar
        :default-config="toolbarConfig"
        :editor="editorRef"
        style="border-bottom: 1px solid #ccc"
      />
      <Editor
        v-model="valueHtml"
        :default-config="editorConfig"
        style="height: 400px; overflow-y: hidden"
        @custom-alert="customAlert"
        @custom-paste="customPaste"
        @on-blur="handleBlur"
        @on-change="handleChange"
        @on-created="handleCreated"
        @on-destroyed="handleDestroyed"
        @on-focus="handleFocus"
      />
    </div>
  </div>
</template>

<script>
  import '@wangeditor/editor/dist/css/style.css'
  import {
    onBeforeUnmount,
    ref,
    shallowRef,
    onMounted,
    toRefs,
    watch,
    nextTick,
  } from 'vue'
  import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
  // import { IEditorConfig } from '@wangeditor/editor'
  import { ElMessage } from 'element-plus'
  import { fileUploadImage } from '@/api/activityrelease/activityreleaseApi.js'

  export default {
    components: { Editor, Toolbar },
    props: {
      content: { // 所要绑定的内容
        type: String,
        default: '',
      },
    },
    emits: ['changeEdit'], // 导出最新数据，每次编辑之后的数据
    setup(props, { emit }) {
      const { content } = toRefs(props)
      // 编辑器实例，必须用 shallowRef，重要！
      const editorRef = shallowRef()

      // 内容 HTML
      const valueHtml = ref('')

      // 获取内容
      onMounted(() => {
        setTimeout(() => {
          nextTick(() => {
            valueHtml.value = content.value
          })
        }, 1500)
      })
      watch(
        () => content.value,
        (val) => {
          valueHtml.value = val
        }
      )

      const toolbarConfig = {
        excludeKeys: [
          'insertVideo',
          'uploadVideo',
          'group-video',
          'insertImage',
          'fullScreen',
        ],
      }
      const editorConfig = {
        placeholder: '请输入内容...',
        MENU_CONF: {
          // 配置上传图片
          uploadImage: {
            async customUpload(file, insertFn) {
              const form = new FormData()
              form.append('file', file)
              await fileUploadImage(form).then((res) => {
                if (res.code != 200)
                  ElMessage({ type: 'warning', message: res.msg })
                let url = res.data
                insertFn(url) //将图片插入编辑器
              })
            },
          },
        },
      }
      // 组件销毁时，也及时销毁编辑器，重要！
      onBeforeUnmount(() => {
        const editor = editorRef.value
        if (editor == null) return
        editor.destroy()
      })

      // 编辑器回调函数
      const handleCreated = (editor) => {
        editorRef.value = editor // 记录 editor 实例，重要！
        nextTick(() => {
          valueHtml.value = content.value
        })
      }
      const handleChange = (editor) => {
        // 举例
        let text = getText(editor.getHtml())
        isNull(text)
          ? emit('changeEdit', '')
          : emit('changeEdit', editor.getHtml())
      }
      const handleDestroyed = () => {
        console.log('destroyed')
      }
      const handleFocus = () => {
        console.log('focus')
      }
      const handleBlur = () => {
        console.log('blur')
      }
      const customAlert = (info, type) => {
        console.log(`【自定义提示】${type} - ${info}`)
      }
      const customPaste = (editor, event, callback) => {
        console.log('ClipboardEvent 粘贴事件对象', editor, event)
        // 自定义插入内容
        // editor.insertText('xxx')
        // 返回值（注意，vue 事件的返回值，不能用 return）
        callback(true) // 返回 false ，阻止默认粘贴行为
        // callback(true) // 返回 true ，继续默认的粘贴行为
      }

      // 判断富文本编辑器输入是否为空或回车
      const getText = (str) => {
        return str
          .replace(/<[^<p>]+>/g, '') // 将所有<p>标签 replace ''
          .replace(/<[</p>$]+>/g, '') // 将所有</p>标签 replace ''
          .replace(/&nbsp;/gi, '') // 将所有 空格 replace ''
          .replace(/<[^<br/>]+>/g, '') // 将所有 换行符 replace ''
      }
      const isNull = (str) => {
        if (str == '') return true
        var regu = '^[ ]+$'
        var re = new RegExp(regu)
        return re.test(str) // true表示判空  false表示不为空
      }
      return {
        editorRef,
        valueHtml,
        toolbarConfig,
        editorConfig,
        handleCreated,
        handleChange,
        handleDestroyed,
        handleFocus,
        handleBlur,
        customAlert,
        customPaste,
        getText,
        isNull,
      }
    },
  }
</script>

3、使用方法

// 引入组件
  import EditContent from '@/vab/components/editContent/index.vue'

// 注册组件
  components: { EditContent },
 
 // 使用组件
<EditContent :content="submitData.activitySynopsis" @change-edit="changeDescribe" />

	// 更新最新内容
      const changeDescribe = (value) => {
        state.submitData.activitySynopsis = value
      }