wangeditor 是开源 Web 富文本编辑器，开箱即用，配置简单，有以下优势: - 简洁易用，功能强大 - 支持 JS Vue React - 踩过 5000+ 坑以上是官网上的简单介绍，有点王婆卖瓜的感觉，大家看看就好。我们项目上之所以选择wangeditor，主要有以下几点： 1. 文档详情，社区活跃，尤其是V5版本（推荐大家使用） 2. 功能支持扩展，包括自定义数据节点、自定义菜单（工具栏，操作） 3. `业务驱动需要自定义数据节点，即自定义dom` wangeditor原生支持的扩展功能包括，“网络图片” 和 “上传图片”，如下图

## 一、插入网络图片网络图片即往编辑器中插入一个网络图片。

## 二、上传图片上传图片，选择本地图片进行上传，下面是一个自定义图片上传的代码实现功能，不是本文的重点，一笔带过，仅供参考： ```js async customUpload(file, insertFn) { // 自定义图片上传 const image: any = await uploadServer({ type: UPLOAD_TYPE.IMAGE, file, progressHandler: handleProgress }) const { url, title } = image // 插入图片 insertFn(url, title); // 对选中节点居中显示 SlateTransforms.setNodes(editorRef.value, { textAlign: 'center' }, { mode: 'highest' // 针对最高层级的节点 }) }, ``` > 对上传的图片进行默认居中显示，是业务上的需求。 ## 三、从素材库选择上传

我们的业务为知识库系统，图片视频等资源会存储在服务器，并通过可视化系统进行管理。如何将素材库运用到编辑器，并将其进行关联。思路如下： - 创建一个按钮菜单“素材图片”，将其配置到菜单栏中，将按钮“素材图片”与业务系统关联起来。比如点击按钮，弹出选择素材的对话框。 - 如何将与“素材图片”按钮放到图片菜单组中，与“网络图片”、“上传图片”并列现实。 - 自定义图片插入功能，将选择的素材插入到编辑器中。思路和方向没有问题，接下来就是实现了。

### 1. 自定义菜单 #### 创建ButtonMenu按钮，创建class ```js import { IButtonMenu, IDomEditor } from '@wangeditor/editor'; // const svg = require('@/assets/svg/ai-keywords-extract.svg') const svgIcon = '' class SelectImageMaterialMenu implements IButtonMenu { // TS 语法 title: string; tag: string; iconSvg: string; constructor() { this.title = '选择素材' // 自定义菜单标题 this.tag = 'button' this.iconSvg = svgIcon // 可选 } // 获取菜单执行时的 value ，用不到则返回空字符串或 false getValue(editor: IDomEditor): string | boolean { return '' } // 菜单是否需要激活（如选中加粗文本，“加粗”菜单会激活），用不到则返回 false isActive(editor: IDomEditor): boolean { return false } // 菜单是否需要禁用（如选中 H1 ，“引用”菜单被禁用），用不到则返回 false isDisabled(editor: IDomEditor): boolean { return false } // 点击菜单时触发的函数 exec(editor: IDomEditor, value: string | boolean) { // 自定义触发事件。 editor.emit('on-select-image-material') } } export default SelectImageMaterialMenu ``` 自定义事件`on-select-image-material`，在按钮点击时触发，并在编辑器创建完成后监听，这样就将编辑器按钮与业务进行关联。触发：`editor.emit('on-select-image-material')` 监听： ```js editor.on('on-select-image-material', () => { ElMessage.success('触发了素材图片按钮！！！') // 后续的业务操作，如弹出选择素材的对话框。 }) ``` #### 注册菜单到 wangEditor ```js const selectImageMaterialMenuConf = { key: 'selectImageMaterial', factory() { return new SelectImageMaterial() }, } ``` #### 插入菜单到工具栏 ```js import { Boot, } from '@wangeditor/editor'; Boot.registerModule({ editorPlugin: dealEditorPlugin, menus: [ selectImageMaterialMenuConf, ], }); ``` ### 2. 配置工具栏菜单。 `toolbarConfig`提供的工具栏的配置api包括： - toolbarKeys： **重新**配置工具栏，显示哪些菜单，以及菜单的排序、分组。 - insertKeys：可以在当前 `toolbarKeys` 的基础上继续插入新菜单，如自定义扩展的菜单。 - excludeKeys：如果仅仅想排除掉某些菜单，其他都保留 - modalAppendToBody：将菜单弹出的 modal 添加到 body 下，并自定义 modal 的定位和其他样式 > 通过提供api，`insertKeys`向工具栏中指定位置插入菜单，仅支持一级菜单，并不支持配置菜单组中二级菜单，图片为菜单组。因此只能通过`toolbarKeys`重新配置工具栏。将自定义的菜单插入图片菜单组中。 #### 获取当前编辑器工具栏所有的配置 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/320dc8b9487e40cd872c1b3e79d8736b~tplv-k3u1fbpfcp-watermark.image?) #### 重新配置工具栏 ```js toolbarConfig.toolbarKeys = [ "headerSelect", "blockquote", "|", "bold", "underline", "italic", { "key": "group-more-style", "title": "更多", "iconSvg": "", "menuKeys": [ "through", "code", "sup", "sub", "clearStyle" ] }, "color", "bgColor", "|", "fontSize", "fontFamily", "lineHeight", "|", "bulletedList", "numberedList", "todo", { "key": "group-justify", "title": "对齐", "iconSvg": "", "menuKeys": [ "justifyLeft", "justifyRight", "justifyCenter", "justifyJustify" ] }, { "key": "group-indent", "title": "缩进", "iconSvg": "", "menuKeys": [ "indent", "delIndent" ] }, "|", "emotion", "insertLink", { "key": "group-image", "title": "图片", "iconSvg": "", "menuKeys": [ "insertImage", "uploadImage", "selectImageMaterial", // 自定义菜单 ] }, { "key": "group-video", "title": "视频", "iconSvg": "", "menuKeys": [ "insertVideo", "uploadVideo" ] }, "insertTable", "codeBlock", "divider", "|", "undo", "redo" ] ``` ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1f3f162c42914b478b0ea85fafb206fb~tplv-k3u1fbpfcp-watermark.image?) ### 3、自定义图片插入方法 wangeditor有插入图片的实现，但是没有对外暴露，因此需要自己试下插入方法。当前实现需要阅读源码。 ```js import { Transforms, Range, Editor } from 'slate' import { IDomEditor, DomEditor } from '@wangeditor/core' // 定义数据类型 type EmptyText = { text: '' } export type ImageStyle = { width?: string height?: string } export type ImageElement = { type: 'image' src: string alt?: string href?: string style?: ImageStyle children: EmptyText[] } export function replaceSymbols(str: string) { return str.replace(//g, '>') } async function check( menuKey: string, editor: IDomEditor, src: string, alt: string = '', href: string = '' ): Promise { const { checkImage } = editor.getMenuConfig(menuKey) if (checkImage) { const res = await checkImage(src, alt, href) if (typeof res === 'string') { // 检验未通过，提示信息 editor.alert(res, 'error') return false } if (res == null) { // 检验未通过，不提示信息 return false } } return true } async function parseSrc(menuKey: string, editor: IDomEditor, src: string): Promise { const { parseImageSrc } = editor.getMenuConfig(menuKey) if (parseImageSrc) { const newSrc = await parseImageSrc(src) return newSrc } return src } export async function insertImageNode( editor: IDomEditor, src: string, alt: string = '', href: string = '' ) { const res = await check('insertImage', editor, src, alt, href) if (!res) return // 检查失败，终止操作 const parsedSrc = await parseSrc('insertImage', editor, src) // 新建一个 image node const image: ImageElement = { type: 'image', src: replaceSymbols(parsedSrc), href, alt, style: {}, children: [{ text: '' }], // 【注意】void node 需要一个空 text 作为 children } // 如果 blur ，则恢复选区 if (editor.selection === null) editor.restoreSelection() // 如果当前正好选中了图片，则 move 一下（如：连续上传多张图片时） if (DomEditor.getSelectedNodeByType(editor, 'image')) { editor.move(1) } if (isInsertImageMenuDisabled(editor)) return // 插入图片 Transforms.insertNodes(editor, image) // 回调 const { onInsertedImage } = editor.getMenuConfig('insertImage') if (onInsertedImage) onInsertedImage(image) } export function isInsertImageMenuDisabled(editor: IDomEditor): boolean { const { selection } = editor if (selection == null) return true if (!Range.isCollapsed(selection)) return true // 选区非折叠，禁用 const [match] = Editor.nodes(editor, { match: n => { const type = DomEditor.getNodeType(n) if (type === 'code') return true // 代码块 if (type === 'pre') return true // 代码块 if (type === 'link') return true // 链接 if (type === 'list-item') return true // list if (type.startsWith('header')) return true // 标题 if (type === 'blockquote') return true // 引用 if (Editor.isVoid(editor, n)) return true // void return false }, universal: true, }) if (match) return true return false } const isDisabled = (editor: IDomEditor) => { return isInsertImageMenuDisabled(editor) } /** * 自定义插入图片 */ export const insertImage = (editor: IDomEditor, src: string, alt: string = '', href: string = '') => { if (!src) return // 还原选区 editor.restoreSelection() if (isDisabled(editor)) return // 插入图片 insertImageNode(editor, src, alt, href) } ``` ### 至此大功告成只需要在我们需要的地方，调用`insertImage`方法即可，如：选择素材之后。

## 参考 [1. 工具栏配置](https://www.wangeditor.com/v5/toolbar-config.html#getconfig) [2. insertImage github源码](https://github.com/wangeditor-team/wangEditor/blob/master/packages/basic-modules/src/modules/image/menu/InsertImage.ts) [3. slatejs 官方文档](https://docs.slatejs.org/)