vue3 页面添加wangEditor富文本框

1.配置安装wangEditor插件

npm install @wangeditor/editor --save

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

2.创建组件

<template>
    <div>
        <div style="border: 1px solid #ccc; margin-top: 10px;">
            <Toolbar :editor="editorRef" :defaultConfig="toolbarConfig" style="border-bottom: 1px solid #ccc" />
            <Editor :defaultConfig="editorConfig" v-model="valueHtml" style="height: 400px; overflow-y: hidden;"
                @onCreated="handleCreated" @onChange="handleChange" @onDestroyed="handleDestroyed"
                @onFocus="handleFocus" @onBlur="handleBlur" @customAlert="customAlert" @customPaste="customPaste" />
        </div>
        <!-- <div style="margin-top: 10px;">
            <textarea v-model="valueHtml" readonly style="width: 100%; height: 200px; outline: none;"></textarea>
        </div> -->
    </div>
</template>

<script setup>
import '@wangeditor/editor/dist/css/style.css'
import { onBeforeUnmount, ref, shallowRef, onMounted, defineEmits } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { getToken } from "@/utils/auth";
import { ElMessage } from 'element-plus'

const emits = defineEmits(['toparentdata'])

// 编辑器实例，必须用 shallowRef，重要！
const editorRef = shallowRef()
// 内容 HTML
const valueHtml = ref('')
// 模拟 ajax 异步获取内容
// onMounted(() => {
//     setTimeout(() => {
//         valueHtml.value = '<p>模拟 Ajax 异步设置内容</p>'
//     }, 1500)
// })
const baseUrl = import.meta.env.VITE_APP_BASE_API;
const headers = ref({ Authorization: "Bearer " + getToken() });


// 菜单内容
const toolbarConfig = {
    excludeKeys : ['blockquote'] //删除的菜单
}
//编辑框内容
const editorConfig = {
    placeholder: '请输入内容...',
    MENU_CONF: {
        // 配置上传图片
        uploadImage: {
            // 请求路径
            server: baseUrl + "/common/upload",
            // // 后端接收的文件名称
            fieldName: "file",
            // maxFileSize: 1 * 1024 * 1024, // 1M
            // // 上传的图片类型
            allowedFileTypes: ["image/*"],
            // // 小于该值就插入 base64 格式（而不上传），默认为 0
            base64LimitSize: 10 * 1024, // 10MB
            // // 自定义插入返回格式【后端返回的格式】
            headers: {
                Authorization: headers.value.Authorization
            },
            // 将 meta 拼接到 url 参数中，默认 false
            // metaWithUrl: false,
            customInsert(res, insertFn) {                  // JS 语法
                // res 即服务端的返回结果
                // 从 res 中找到 url alt href ，然后插入图片
                insertFn(res.url)
            },
            onBeforeUpload(file) { // TS 语法
                // onBeforeUpload(file) {    // JS 语法
                // file 选中的文件，格式如 { key: file }
                return file

                // 可以 return
                // 1. return file 或者 new 一个 file ，接下来将上传
                // 2. return false ，不上传这个 file
            },

            // 上传进度的回调函数
            onProgress(progress) {
                // progress 是 0-100 的数字
                console.log('progress', progress)
            },

            // 单个文件上传成功之后
            onSuccess(file, res) {
                console.log(`${file.name} 上传成功`, res)
                ElMessage({
                    message: `${file.name} 上传成功`,
                    type: 'success',
                })
            },

            // 单个文件上传失败
            onFailed(file, res) {
                ElMessage.error(`${file.name} 上传失败`)
            },

            // 上传错误，或者触发 timeout 超时
            onError(file, err, res) {
                ElMessage.error(`${file.name} 上传出错`)

            },
        }
    }
}
// 组件销毁时，也及时销毁编辑器，重要！
onBeforeUnmount(() => {
    const editor = editorRef.value
    if (editor == null) return
    editor.destroy()
})
// 编辑器回调函数
const handleCreated = (editor) => {
    console.log('created', editor);
    editorRef.value = editor // 记录 editor 实例，重要！
}
//监听文本框数据
const handleChange = (editor) => {
    // console.log('change:', editor.getHtml());
    emits('toparentdata', editor.getHtml())
}
// 销毁事件
const handleDestroyed = (editor) => {
    console.log('destroyed', editor)
}
// 聚焦事件
const handleFocus = (editor) => {
    console.log('focus', editor)
}
// 失焦事件
const handleBlur = (editor) => {
    console.log('blur', editor)
}
const customAlert = (info, type) => {
    alert(`【自定义提示】${type} - ${info}`)
}
//粘贴事件
const customPaste = (editor, event, callback) => {
    // 返回值（注意，vue 事件的返回值，不能用 return）
    // callback(false) // 返回 false ，阻止默认粘贴行为
    callback(true) // 返回 true ，继续默认的粘贴行为
}
const insertText = () => {
    const editor = editorRef.value
    if (editor == null) return
    editor.insertText('hello world')
}
const printHtml = () => {
    const editor = editorRef.value
    if (editor == null) return
    console.log(editor.getHtml())
}
const disable = () => {
    const editor = editorRef.value
    if (editor == null) return
    editor.disable()
}

</script>

3.在页面引用组件

<template>
     <div class="app-container">
        <div>
            <WangEditor @toparentdata="toparentdata"></WangEditor>
        </div>
        <div class="footbtn">
            <div class="btn">
                <el-button type="primary" @click="addupload">
                    <el-icon class="el-icon--right"><Upload /></el-icon>
                    <span style="margin:0 5px">提交</span>
                </el-button>
            </div>
        </div>
    </div>
</template>

<script setup>
import { reactive, toRefs, ref } from 'vue'
import WangEditor from '@/components/wangEditor'
const data = reactive({
    queryParams: {
        pageNum: 1,
        pageSize: 10,
        mailName: undefined,
        state: undefined,
        text:undefined
    }
})

const { queryParams } = toRefs(data);
const toparentdata = (data) => {
    queryParams.value.text = data;
}

//提交
const addupload = () => {
    console.log('提交',queryParams.value.text);
}

</script>
<style lang='scss'>
.footbtn {
    margin-top: 20px;
    height: 50px;
    .btn{
        float: right;
    }
}
</style>

4.附加官网地址：wangEditor