vue3 element ui 使用wangeditor

1. 我是比较懒的人,向来只想crtl+c crtl+v就能完成任务最好,所以只给大家最简便的方式
2. npm安装这2个插件 ,你懂吧
3. 第一步： npm i @wangeditor/editor
4. 第二步： npm i @wangeditor/editor-for-vue
5. 下面是是创建组件

components

editor

index.vue 创建index.vue 这是组件名称不是目录 /components/editor/index.vue直观一点

7. 组件代码。

// 注释信息
// emits: ['update:editorValue'],  vue3中在子组件中只能这种方式实现
// props: ['editorValue'],
// onchange是更改的时候都及时更新到编辑器中

// 这是index.vue内容
<template>
    <div style="border: 1px solid #ccc">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef"
        :defaultConfig="toolbarConfig"
        :mode="mode"
      />
      <Editor
        style="height: 200px; overflow-y: hidden;"
        v-model="valueHtml"
        :defaultConfig="editorConfig"
        :mode="mode"
        @onCreated="handleCreated"
        @onChange="handleChanged"
      />
    </div>
</template>

<script>
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { onBeforeUnmount, ref, shallowRef, onMounted } from 'vue'
import Message from '/admin/support/message'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { env, getAuthToken } from '/admin/support/helper'

export default {
  components: { Editor, Toolbar },
  emits: ['update:editorValue'],
  props: ['editorValue'],
  setup(props,ctx ) {
    // 编辑器实例，必须用 shallowRef
    const editorRef = shallowRef()
    // 内容 HTML
    const valueHtml = ref('<p></p>')
    onMounted(() => {
        setTimeout(() => {
            // 为了编辑无内容 我觉得可不需要直接 valueHtml.value = '<p></p>' 即可
            if(props.editorValue== '' || props.editorValue== undefined){
                valueHtml.value = '<p></p>'
            }else {
                valueHtml.value = props.editorValue
            }
        }, 500)
    })
    // 菜单配置 具体看文档
    const toolbarConfig = {
        excludeKeys:[
            'fullScreen',
            'group-video'
        ]
    }
    const imageAction = ref(env('VITE_BASE_URL') + 'upload/image')
    const headers = ref(
        {
            authorization: 'Bearer ' + getAuthToken()
        }
    )
    const editorConfig = {
        placeholder: '请输入编辑器内容',
        MENU_CONF:{
            uploadImage: {
                server: imageAction.value,
                fieldName: "image",
                maxFileSize: 10 * 1024 * 1024, // 上传图片10M
                allowedFileTypes: [],
                base64LimitSize: 10 * 1024, // 10MB
                customInsert(res, insertFn) {
                    insertFn(res.path, res.originalName,res.path)
                },
                headers:headers.value,
                metaWithUrl: true,
                onSuccess(file, res) {
                    if(res.path == ''){
                        Message.warning(`${file.name} 上传出现异常`)
                        return
                    }
                    return
                },
                onFailed(file, res) {
                    console.log(res)
                    Message.error(`${file.name} 上传失败`)
                },
                onError(file, err, res) {
                    console.log(err, res)
                    Message.error(`${file.name} 上传出错`)
                },
            }
        }

    }

    // 组件销毁时，也及时销毁编辑器
    onBeforeUnmount(() => {
        const editor = editorRef.value
        if (editor == null) return
        editor.destroy()
    })

    const handleChanged=(editor) => {
        ctx.emit('update:editorValue',editor.getHtml())
    }
    const handleCreated = (editor) => {
      editorRef.value = editor 
    }

    const customPaste = (editor, event, callback) => {
        console.log('ClipboardEvent 粘贴事件对象', event)
        // 自定义插入内容
        editor.insertText('xxx')
        // 返回 false ，阻止默认粘贴行为
        event.preventDefault()
        callback(false) // 返回值（注意，vue 事件的返回值，不能用 return）
        // 返回 true ，继续默认的粘贴行为
        // callback(true)
    }

    return {
      editorRef,
      valueHtml,
      mode: 'default', // 或 'simple'
      toolbarConfig,
      editorConfig,
      handleCreated,
      customPaste,
      handleChanged,
    };
  }
}
</script>

1. 父组件如何使用
2. 父组件 相关代码。

// @update:editorValue 是子组件的事件 用来更新编辑器内容的

// 父组件使用
    <editor style="width: 100%;height:400px"
            @update:editorValue="update"
             ref="editorRef"
            v-model="formData.overview"
            :editorValue="formData.overview"></editor>

// 这是js更新formData的value值
const update = (value:any) => {
    formData.value.overview = value
}

在这里你已经抄袭完毕了,其他问题暂时还未发现，如发现，请给楼主留言更新。
headers和env均为楼主的配置文件和传递的token相关。可不引用