vue3.x 使用wangeditor 富文本编辑器

<template>
  <div class="wangeditor-box posr">
    <!-- <button class="editor-upload-img cp" @click="uploadImgzd">上传图片</button> -->
    <div style="border: 1px solid #ccc">
      <Toolbar
        :editor="editorRef"
        style="border-bottom: 1px solid #ccc"
        :default-config="toolbarConfig"
        class="tool-class"
        :mode="mode"
      />
      <Editor
        v-model="valueHtml"
        :default-config="editorConfig"
        class="editor-class"
        style="height: 400px; overflow-y: hidden;font-size:14px;"
        :mode="mode"
        @onCreated="handleCreated"
        @onChange="handleonChange"
        @onFocus="handleonFocus"
      />
    </div>
  </div>
</template>
<script>

import OnlyMessage from '@/utils/onlyMsgbox'
import { onBeforeUnmount, ref, reactive, shallowRef, onMounted } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import '@wangeditor/editor/dist/css/style.css' // 引入 css

export default {
  components: { Editor, Toolbar },
  props: {
    value: {
      default() {
        return ''
      },
      type: String
    }
  },
  emits: ['changeEdit'],
  setup(props, ctx) {
    // 编辑器实例，必须用 shallowRef
    const editorRef = shallowRef()
    const valueHtml = ref('')

    // 模拟 ajax 异步获取内容
    onMounted(() => {
      setTimeout(() => {
        valueHtml.value = props.value
        console.log(editorRef.value)
      }, 100)
    })

    const toolbarConfig = {
    }
    const editorConfig = {
      placeholder: '请输入内容...',
      MENU_CONF: {}
    }
    editorConfig.MENU_CONF['uploadImage'] = {
      // 修改 uploadImage 菜单配置
      server: 'https://devapi.yunxiaofu.net/official/upload/v1/app/businesslicense',
      fieldName: 'custom-field-name',
      // 单个文件的最大体积限制，默认为 2M
      maxFileSize: 1 * 1024 * 1024, // 1M
      // 最多可上传几个文件，默认为 100
      maxNumberOfFiles: 10,
      // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
      allowedFileTypes: ['image/*'],
      // 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。
      meta: {
        token: '',
        appversion: ''
      },
      // 将 meta 拼接到 url 参数中，默认 false
      metaWithUrl: false,
      // 自定义增加 http  header
      headers: {
        token: '',
        appversion: ''
      },

      // 跨域是否传递 cookie ，默认为 false
      withCredentials: true,

      // 超时时间，默认为 10 秒
      timeout: 5 * 1000, // 5 秒
      // 继续写其他配置...
      // 【注意】不需要修改的不用写，wangEditor 会去 merge 当前其他配置
      onBeforeUpload(files) {
        console.log('onBeforeUpload', files)
        return files // 返回哪些文件可以上传
        // return false 会阻止上传
      },
      onProgress(progress) {
        console.log('onProgress', progress)
      },
      onSuccess(file, res) {
        console.log('onSuccess', file, res)
      },
      onFailed(file, res) {
        console.log('onFailed', file, res)
      },
      onError(file, err, res) {
        console.error('onError', file, err, res)
      },
      // 用户自定义插入图片
      customInsert(res, insertFn) {
        console.log('customInsert', res)
        const imgInfo = res.data
        const { filePath } = imgInfo
        if (!filePath) throw new Error(`Image filePath is empty`)
        // 自己插入图片
        console.log('自己插入图片', filePath)
        insertFn(filePath)
      }
      // // 用户自定义插入图片
      // customInsert(res, insertFn) {
      //   console.log('customInsert', res)
      //   const imgInfo = res.data[0] || {}
      //   const { url, alt, href } = imgInfo
      //   if (!url) throw new Error(`Image url is empty`)
      //   // 自己插入图片
      //   console.log('自己插入图片', url)
      //   insertFn(url, alt, href)
      // }
      // // 用户自定义上传图片
      // customUpload(file, insertFn) {
      //   console.log('customUpload', file)
      //   return new Promise((resolve) => {
      //     // 插入一张图片，模拟异步
      //     setTimeout(() => {
      //       const src = `https://www.baidu.com/img/flexible/logo/pc/result@2.png?r=${Math.random()}`
      //       insertFn(src, '百度 logo', src)
      //       resolve('ok')
      //     }, 500)
      //   })
      // },
      // // 自定义选择图片（如图床）
      // customBrowseAndUpload(insertFn) {
      //   alert('自定义选择图片，如弹出图床')
      //   // 插入一张图片，模拟异步
      //   setTimeout(() => {
      //     const src = 'https://www.baidu.com/img/flexible/logo/pc/result@2.png'
      //     insertFn(src, '百度 logo', src) // 插入图片
      //   }, 500)
      // }
    }
    // 组件销毁时，也及时销毁编辑器
    onBeforeUnmount(() => {
      const editor = editorRef.value
      if (editor == null) return
      editor.destroy()
    })

    const handleCreated = (editor) => {
      editorRef.value = editor // 记录 editor 实例，重要！
    }
    // 拿到所有的数据
    const handleonChange = (editor) => {
      // console.log('content', editor.children)
      // console.log(valueHtml.value)
      // 返回的是所有的Html 和所有的数据
      ctx.emit('changeEdit', editor.children, valueHtml.value)
    }
    // 拿到所有的数据
    const handleonFocus = (editor) => {
      // 返回的是所有的Html 和所有的数据
      ctx.emit('changeEdit', editor.children, valueHtml.value)
    }

    return {
      editorRef,
      mode: 'default', // 或 'simple' 'default'
      valueHtml,
      toolbarConfig,
      editorConfig,
      handleCreated,
      handleonChange,
      handleonFocus
    }
  }
}
</script>
<style lang="scss" >
// .wangeditor-box {

// }

.editor-upload-img {
    position: absolute;
    top: 5px;
    left: 8px;
    z-index: 1;
    color: #666;
    width: 64px;
    height: 32px;
}
// 去掉全屏
.w-e-toolbar .w-e-bar-item:last-child .w-e-menu-tooltip-v5{
    display: none;
}
.w-e-toolbar .w-e-bar-item:nth-child(26) {
    display: none;
}
// 隐藏上传网络图片
.w-e-toolbar .w-e-bar-item:nth-child(23) .w-e-bar-item-menus-container .w-e-bar-item:first-child {
  display: none;
}
.w-e-toolbar .w-e-bar-item:nth-child(24) {
    display: none;
}

</style>

2.使用

          <Wangeditor :value="valueEditor" @changeEdit="changeEdit"></Wangeditor>

    const valueEditor = ref('<span>123</span>')

    // 返回左右的基本数据   和html代码数据
    const changeEdit = (arr, html) => {
      console.log(arr)
      console.log(html)
    }