1.配置安装wangEditor插件
npm install @wangeditor/editor --savenpm 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()// 内容 HTMLconst 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 格式（而不上传），默认为 0base64LimitSize: 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.valueif (editor == null) returneditor.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.valueif (editor == null) returneditor.insertText('hello world')}const printHtml = () => {const editor = editorRef.valueif (editor == null) returnconsole.log(editor.getHtml())}const disable = () => {const editor = editorRef.valueif (editor == null) returneditor.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
