375
分类： 前端
简介：WangEditor5富文本编辑器安装及使用说明——Vue2版本一、安装yarn add @wangeditor/editor
# 或者 npm install @wangeditor/editor save yarn add @wangeditor/editor for vue
# 或者 npm install @wangeditor/editor for vue save二、使用父组件调用//使用组件（因为组件销毁不及时，会出现报错Uncaught (in promise) Error: Cannot find a descendant at path，所以使用v if来让组件和弹出框一起销毁）
<wang editor v if="visible" ref="editor" :value.sync="form.content" @updateContent = "updateContent"/> //引入组件 import WangEditor from '@/components/WangEditor/index.vue'; //获取子组件传回的html updateContent(val){ this.form.content = val; },编辑器组件<template> <div style="border: 1px solid #ccc"> <! 工具栏 > <Toolbar style="border bottom: 1px solid #ccc" :editor="editor" :defaultConfig="toolbarConfig" :mode="mode" /> <! 文本输入区域 > <Editor style="height: 500px; overflow y: hidden" v model="html" :defaultConfig="editorConfig" :mode="mode" @onCreated="onCreated" @onChange="onChange" @onDestroyed="onDestroyed" @customPaste="customPaste" /> </div>
</template>
<script>
import Vue from 'vue';
import { Editor, Toolbar } from '@wangeditor/editor for vue';
import { DomEditor } from '@wangeditor/editor';
//图片上传接口
import { UploadBase64 } from '@/api/user/userInfo';
export default Vue.extend({ //注册组件 components: { Editor, Toolbar }, //接受父组件传值 props: { url: { //上传图片的url type: String, default: '' }, value: { //父组件传过来的值 type: String, default: '' }, height: { //编辑器高度，暂时不用 type: Number, default: 250 } }, name: 'wang editor', data() { return { editor: null, html: this.value, //工具栏配置区 toolbarConfig: { //删除表情包,视频上传,代码块组件 excludeKeys: ['emotion', 'group video',"codeBlock"], //添加功能 // insertKeys:{ // index:32, // keys:[{ // key: 'group more style', // 必填，要以 group 开头 // 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: ["imageWidth30","imageWidth50","imageWidth100"] // 下级菜单 key ，必填 // }] // } }, //编辑器配置区 editorConfig: { //空白提示 placeholder: '请输入内容...', //对编辑器功能修改 MENU_CONF: { //接入图片上传接口 uploadImage: { customUpload: async (file, insertFn) => { // JS 语法 const formData = new FormData(); formData.append('file', file); UploadBase64(formData).then((res) => { var url = res.data.url; insertFn(url); }); } } } }, mode: 'default' // or 'simple' }; }, watch: { //监听value，更新编辑器内容 value: function (value) { this.$nextTick(() => { this.editor.setHtml(value); }); } }, methods: { //初始化 onCreated(editor) { this.editor = Object.seal(editor); }, //输入事件（改一次触发一次） onChange(editor) { let value = editor.getHtml(); this.$emit('updateContent', value); // const list = editor.getAllMenuKeys(); //获取工具栏所有工具的配置（不能放在onCreated中） // const toolbar = DomEditor.getToolbar(editor); // const curToolbarConfig = toolbar.getConfig(); // console.log(curToolbarConfig.toolbarKeys); // 当前菜单排序和分组 }, //销毁 onDestroyed(editor) , //复制粘贴事件 customPaste(editor, event, callback) { 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(html); // 返回 false ，阻止默认粘贴行为 event.preventDefault(); // callback(false) // 返回值（注意，vue 事件的返回值，不能用 return） // 返回 true ，继续默认的粘贴行为 callback(true); } }, mounted() , beforeDestroy() { //销毁事件 const editor = this.editor; if (editor == null) return; editor.destroy(); // 组件销毁时，及时销毁编辑器 }
});
</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>三、自定义功能自定义按钮(缩放图片75%)import { Transforms, Node } from 'slate'
import { Editor, Toolbar } from '@wangeditor/editor for vue';
import { Boot ,IButtonMenu, IDomEditor,DomEditor } from '@wangeditor/editor' class MyButtonMenu { // JS 语法 constructor() { this.title = '图像' // 自定义菜单标题 this.iconSvg = '<svg t="1698982063081" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p id="1509" width="200" height="200"><path d="M744 62H280c 35.3 0 64 28.7 64 64v768c0 35.3 28.7 64 64 64h464c35.3 0 64 28.7 64 64V126c0 35.3 28.7 64 64 64z m 8 824H288V134h448v752z" p id="1510"></path><path d="M512 784m 40 0a40 40 0 1 0 80 0 40 40 0 1 0 80 0Z" p id="1511"></path></svg>' // 可选 this.tag = 'button' } // 获取菜单执行时的 value ，用不到则返回空 字符串或 false getValue(editor) { // JS 语法 return '' } // 菜单是否需要激活（如选中加粗文本，“加粗”菜单会激活），用不到则返回 false isActive(editor) { // JS 语法 return false } getSelectedNode(editor){ return DomEditor.getSelectedNodeByType(editor, 'image') } // 菜单是否需要禁用（如选中 H1 ，“引用”菜单被禁用），用不到则返回 false isDisabled(editor) { // JS 语法 if (editor.selection == null) return true const imageNode = this.getSelectedNode(editor) if (imageNode == null) { // 选区未处于 image node ，则禁用 return true } return false } // 点击菜单时触发的函数 exec(editor, value) { // JS 语法 if (this.isDisabled(editor)) return const imageNode = this.getSelectedNode(editor) if (imageNode == null) return // 隐藏 hoverbar const hoverbar = DomEditor.getHoverbar(editor) if (hoverbar) hoverbar.hideAndClean() const { style = } = imageNode const props = { style: { ...style, width: '75%', // 修改 width height: '', // 清空 height }, } Transforms.setNodes(editor, props, { match: n => DomEditor.checkNodeType(n, 'image'), }) } } const menu1Conf = { key: 'image mobile', // 定义 menu key ：要保证唯一、不重复（重要） factory() { return new MyButtonMenu() // 把 `YourMenuClass` 替换为你菜单的 class },
}
Boot.registerMenu(menu1Conf)在image的hoverbar中注册按钮 hoverbarKeys:{ 'image': { // 配置image元素的hoverbar menuKeys: ["imageWidth30","imageWidth50","imageWidth100","editImage","viewImageLink","deleteImage","image mobile"], } }
