Vue3 使用 富文本编辑器 wangeditor/editor-for-vue 配置详解
先上官网地址 wangEditor 5 点这里
- wangeditor 主要API
配置功能栏
let toolbarConfig = { toolbarKeys: [ "bold", // 字体加粗 "underline", // 字体下划线 "italic", // 字体斜体 "through", // 字体删除线 "code", // 字体代码 "sub", // 下标 "sup", // 上标 "clearStyle", // 清除字体样式 "color", // 字体颜色 "bgColor", // 背景颜色 "fontSize", // 字体大小 "fontFamily", // 字体 // "indent", // 增加缩进 // "delIndent", // 减少缩进 // "justifyLeft", // 左对齐 // "justifyRight", // 右对齐 // "justifyCenter", // 居中对齐 // "justifyJustify", // 两端对齐 '|', // 分割线 "lineHeight", // 行间距 "insertImage", // 插入图片 "deleteImage", // 删除图片 "editImage", // 编辑图片 "viewImageLink", // 查看图片链接 "imageWidth30", // 图片宽度30% "imageWidth50", // 图片宽度50% "imageWidth100", // 图片宽度100% "divider", // 分隔线 "emotion", // 表情 "insertLink", // 插入链接 "editLink", // 编辑链接 "unLink", // 取消链接 "viewLink", // 查看链接 "codeBlock", // 代码块 "blockquote", // 引用块 '|', "headerSelect", // 头部类型选择 "header1", // 头部1 "header2", // 头部2 "header3", // 头部3 "header4", // 头部4 "header5", // 头部5 "todo", // 待办事项 "redo", // 重做 "undo", // 撤销 "fullScreen", // 全屏 "enter", // 换行 "bulletedList", // 无序列表 "numberedList", // 有序列表 "insertTable", // 插入表格 "deleteTable", // 删除表格 "insertTableRow", // 插入表格行 "deleteTableRow", // 删除表格行 "insertTableCol", // 插入表格列 "deleteTableCol", // 删除表格列 "tableHeader", // 表格标题 "tableFullWidth", // 表格全宽 // "insertVideo", // 插入视频 // "uploadVideo", // 上传视频 "editVideoSize", // 编辑视频大小 "uploadImage", // 上传图片 "codeSelectLang", // 选择代码语言 // 设置为下拉选择 --------------------------------------- 一下代码为下拉样式 { key: 'group-video', title: '视频', // 下拉名称 iconSvg: '<svg viewBox="0 0 1024 1024"><path d="M981.184 160.096C837.568 139.456 678.848 128 512 128S186.432 139.456 42.816 160.096C15.296 267.808 0 386.848 0 512s15.264 244.16 42.816 351.904C186.464 884.544 345.152 896 512 896s325.568-11.456 469.184-32.096C1008.704 756.192 1024 637.152 1024 512s-15.264-244.16-42.816-351.904zM384 704V320l320 192-320 192z"></path></svg>', // 下拉图标 menuKeys: ['insertVideo', 'uploadVideo'], // 插入视屏 // 视屏上传 }, '|', { key: 'group-justify', title: '对齐', iconSvg: '<svg viewBox="0 0 1024 1024"><path d="M768 793.6v102.4H51.2v-102.4h716.8z m204.8-230.4v102.4H51.2v-102.4h921.6z m-204.8-230.4v102.4H51.2v-102.4h716.8zM972.8 102.4v102.4H51.2V102.4h921.6z"></path></svg>', menuKeys: ['justifyLeft', 'justifyRight', 'justifyCenter', 'justifyJustify'], // 对齐的四种方式 }, { key: 'group-indent', title: '缩进', iconSvg: '<svg viewBox="0 0 1024 1024"><path d="M0 64h1024v128H0z m384 192h640v128H384z m0 192h640v128H384z m0 192h640v128H384zM0 832h1024v128H0z m0-128V320l256 192z"></path></svg>', menuKeys: ['indent', 'delIndent'], // 缩进的两种方式 }, ] };
编辑器配置
//编辑器配置 let editorConfig = { placeholder: '请输入内容...', // 配置编辑器 placeholder readOnly: false, // 配置编辑器是否只读，默认为 false autoFocus: true, // 配置编辑器默认是否 focus ，默认为 true scroll: true, // 配置编辑器是否支持滚动，默认为 true maxLength: 1000, // 最大输入length hoverbarKeys：{ 'link': { // 重写 link 元素的 hoverbar menuKeys: ['editLink', 'unLink', 'viewLink'], }, 'image': { // 清空 image 元素的 hoverbar menuKeys: [], } }, onMaxLength:(editor)=>{ // 当达到 maxlength 限制时，触发该回调函数 }, onCreated: (editor) => { // 编辑器创建完毕时的回调函数。 }, onChange: (editor) => { // 编辑器内容、选区变化时的回调函数。 }, onDestroyed: (editor) => { // 编辑器销毁时的回调函数。 }, onFocus: (editor) => { // 编辑器 focus 时的回调函数。 }, onBlur: (editor) => { // 编辑器 blur 时的回调函数。 }, customPaste: (editor) => { // 编辑器 blur 时的回调函数。 }, customAlert: (s,t) => { // 自定义编辑器 alert } // 所有的菜单配置，都要在 MENU_CONF 属性下 MENU_CONF: { // 插入图片 insertImage: { onInsertedImage(){ }, }, // 配置上传图片 uploadImage: { customUpload: (file, insertFn)=>{ // 上传图片的方法 }, }, // 配置上传视频 uploadVideo: { customUpload: (file, insertFn)=>{ // 上传视频的方法 }, }, }, };
以上为基本常用的一些配置
- 使用方法
插件安装
yarn add @wangeditor/editor # 或者 npm install @wangeditor/editor --save yarn add @wangeditor/editor-for-vue # 或者 npm install @wangeditor/editor-for-vue --save
组件封装
// 组件封装 // WangEditor.vue <template> <div style="border: 1px solid #ccc" v-loading="loading" element-loading-text="文件上传中..."> <div style="color: red; padding-left: 18px">注：视频最佳宽度700-900</div> <Toolbar style="border-bottom: 1px solid #ccc" class="count-yc-box-title" :editor="editorRef" :defaultConfig="toolbarConfig" :mode="mode" /> <Editor style="min-height: 250px; overflow-y: hidden" v-model="valueHtml" :defaultConfig="editorConfig" :mode="mode" @onCreated="handleCreated" class="count-yc-box" /> </div> </template> <script> //script标签中引入 import '@wangeditor/editor/dist/css/style.css'; // 引入 css import { Editor, Toolbar } from '@wangeditor/editor-for-vue'; import { defineExpose, onMounted, watch } from 'vue'; import request from '@/utils/request'; // 这个是请求封装 请更换为你的地址 export default { components: { Editor, Toolbar }, props: { editValue: { type: String, default: '', }, }, setup(props, { emit }) { emits: ['select']; // 编辑器实例，必须用 shallowRef const editorRef = shallowRef(); console.log(editorRef, 'editor.getAllMenuKeys()'); // 内容 HTML const valueHtml = ref(''); const loading = ref(false); watch( () => props.editValue, (val) => { //当编辑器的内容发生变化时，把值传给父组件 valueHtml.value = props.editValue; }, { deep: true, immediate: true, } ); //配置功能栏 let toolbarConfig = { toolbarKeys: [ 'headerSelect', 'header1', 'header2', 'header3', { key: 'group-video', title: '视频', iconSvg: '<svg viewBox="0 0 1024 1024"><path d="M981.184 160.096C837.568 139.456 678.848 128 512 128S186.432 139.456 42.816 160.096C15.296 267.808 0 386.848 0 512s15.264 244.16 42.816 351.904C186.464 884.544 345.152 896 512 896s325.568-11.456 469.184-32.096C1008.704 756.192 1024 637.152 1024 512s-15.264-244.16-42.816-351.904zM384 704V320l320 192-320 192z"></path></svg>', menuKeys: ['insertVideo', 'uploadVideo'], }, 'blockquote', '|', 'bold', 'underline', 'italic', 'lineHeight', { key: 'group-more-style', title: '更多', iconSvg: '<svg viewBox="0 0 1024 1024"><path d="M204.8 505.6m-76.8 0a76.8 76.8 0 1 0 153.6 0 76.8 76.8 0 1 0-153.6 0Z"></path><path d="M505.6 505.6m-76.8 0a76.8 76.8 0 1 0 153.6 0 76.8 76.8 0 1 0-153.6 0Z"></path><path d="M806.4 505.6m-76.8 0a76.8 76.8 0 1 0 153.6 0 76.8 76.8 0 1 0-153.6 0Z"></path></svg>', menuKeys: ['through', 'code', 'sup', 'sub'], }, 'color', 'bgColor', '|', 'fontSize', { key: 'group-justify', title: '对齐', iconSvg: '<svg viewBox="0 0 1024 1024"><path d="M768 793.6v102.4H51.2v-102.4h716.8z m204.8-230.4v102.4H51.2v-102.4h921.6z m-204.8-230.4v102.4H51.2v-102.4h716.8zM972.8 102.4v102.4H51.2V102.4h921.6z"></path></svg>', menuKeys: ['justifyLeft', 'justifyRight', 'justifyCenter', 'justifyJustify'], }, 'todo', 'fontFamily', { key: 'group-indent', title: '缩进', iconSvg: '<svg viewBox="0 0 1024 1024"><path d="M0 64h1024v128H0z m384 192h640v128H384z m0 192h640v128H384z m0 192h640v128H384zM0 832h1024v128H0z m0-128V320l256 192z"></path></svg>', menuKeys: ['indent', 'delIndent'], }, '|', 'emotion', 'insertLink', 'uploadImage', 'insertTable', 'codeBlock', 'divider', 'clearStyle', '|', 'undo', 'redo', ], }; const uploadImageList = ref([]); const saveImageList = ref([]); //上传本地图片 function update(file, insertFn) { let formData = new FormData(); formData.append('file', file); loading.value = true; request({ url: '/common/file/upload', headers: { 'Content-Type': 'multipart/form-data', }, method: 'post', timeout: 50000, data: formData, }) .then((res) => { if (res.code === 200) { const src = res.data.fileUrl; insertFn(src, '百度 logo', src); loading.value = false; } else { loading.value = false; } }) .catch(() => { loading.value = false; }); } function getOnInsertedImage(imageNode) { uploadImageList.value.push(imageNode); } //编辑器配置 let editorConfig = { placeholder: '请输入内容...', // 所有的菜单配置，都要在 MENU_CONF 属性下 MENU_CONF: { insertImage: { onInsertedImage: getOnInsertedImage(), }, // 配置上传图片 uploadImage: { customUpload: update, }, uploadVideo: { customUpload: update, }, }, }; // 组件销毁时，也及时销毁编辑器 onBeforeUnmount(() => { const editor = editorRef.value; if (editor == null) return; editor.destroy(); }); function copyObject(obj) { return JSON.parse(JSON.stringify(obj)); } const handleCreated = (editor) => { editorRef.value = editor; // 记录 editor 实例，重要！ saveImageList.value = editor.getElemsByType('image'); uploadImageList.value = copyObject(saveImageList.value); }; watch( () => valueHtml.value, () => { //当编辑器的内容发生变化时，把值传给父组件 emit('select', valueHtml.value); } ); // 一下方法 用作回调 但暂时未调用 const handleChange = (editor) => { console.log('change:', editor.children); }; 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) => { console.log(`【自定义提示】${type} - ${info}`); }; const customPaste = (editor, event, callback) => { console.log('ClipboardEvent 粘贴事件对象', event); // const html = event.clipboardData.getData('text/html') // 获取粘贴的 html // const text = event.clipboardData.getData('text/plain') // 获取粘贴的纯文本 // const rtf = event.clipboardData.getData('text/rtf') // 获取 rtf 数据（如从 word wsp 复制粘贴） // 自定义插入内容 editor.insertText('xxx'); // 返回 false ，阻止默认粘贴行为 event.preventDefault(); callback(false); // 返回值（注意，vue 事件的返回值，不能用 return） // 返回 true ，继续默认的粘贴行为 // callback(true) }; //父组件调用子组件的方法清空编辑器内容 const abc = function () { valueHtml.value = ''; }; //暴露该方法,defineExpose要引入 defineExpose({ abc, valueHtml, }); return { editorRef, valueHtml, mode: 'default', // 或 'simple' toolbarConfig, editorConfig, handleCreated, handleChange, handleDestroyed, handleFocus, handleBlur, customAlert, customPaste, abc, loading, }; }, }; </script>
组件使用
<template> <el-form ref="ruleFormRef" :model="ruleForm" class="demo-ruleForm" label-width="80px"> <el-form-item label="内容" prop="content" v-if="ruleForm.radio1 == 1" class="label-befor"> <WangEditor class="WangEditor" @select="getRich" ref="childrenRef" :editValue="editValue" /> </el-form-item> </el-form> </template> <script setup> import { onMounted, reactive, ref, watch, nextTick } from 'vue' import WangEditor from '@/custom/WangEditor.vue' const props = defineProps({ // 父页面传递的数据 dataRow: { type: Object, default: () => { return { "title": "", "languageType": 1, "contentType": 1, "content": "", "remark": null } } }, }) const ruleFormRef = ref() const ruleForm = reactive({ content: "", }) const editValue = ref("") watch(props, (newUser, oldUser) => { if (props.dataRow && props.dataRow.id) { // 富文本回显 ruleForm.content = props.dataRow.content editValue.value = ruleForm.content } }, { deep: true, immediate: true }); //当编辑器的内容更新时，获取该值 const getRich = function (value) { ruleForm.content = value } defineExpose({ ruleForm, }) </script>
上图
以上的代码封装 以及使用方法可直接复制使用 但需要修改你自己的上传接口。
以上就是wangeditor/editor-for-vue 基本配置详解，希望可以帮到您！
