wangEditor修改节点数据

​

前言

wangEditor简介

wangEditor 是一款基于 JavaScript 和 jQuery 的开源富文本编辑器，具有简单易用、功能丰富的特点。它提供了一整套的富文本编辑功能，包括文字样式设置、插入图片、插入表格、插入链接、代码块等。wangEditor 支持多种浏览器，适用于 Web 页面的编辑需求。

wangEditor 的主要特点和功能包括：

1.简单易用：wangEditor 提供直观的用户界面和简洁的操作方式，使用户能够轻松进行文字编辑和格式设置。

2.功能丰富：wangEditor 内置了丰富的富文本编辑功能，如加粗、斜体、下划线、字号选择、颜色调整等，以满足不同编辑需求。

3.图片和文件插入：wangEditor 允许用户插入图片和其他文件，并提供了图片上传和文件管理功能，方便用户在编辑器中添加多媒体内容。

4.表格插入和编辑：wangEditor 支持插入和编辑表格，用户可以自定义表格的行数、列数和样式。

5.自定义样式：用户可以自定义编辑器的样式，包括字体、背景颜色、工具栏按钮等，以满足不同项目和品牌的需求。

6.可扩展性：wangEditor 提供了丰富的插件接口，用户可以根据自己的需求开发和集成插件，扩展编辑器的功能。

7.跨浏览器兼容性：wangEditor 在多种现代浏览器上进行了充分测试，并提供了良好的跨浏览器兼容性，确保用户在不同浏览器上都能正常使用。

8.开源社区支持：wangEditor 是一个开源项目，托管在 GitHub 上，拥有活跃的开发者社区。用户可以通过参与讨论、查阅在线文档等方式获取支持。

总而言之，wangEditor 是一款易用且功能强大的富文本编辑器，适用于 Web 应用程序和网页中的富文本编辑需求。

如需了解更多关于 wangEditor 的详细信息和使用方式，请访问官方网站：https://www.wangeditor.com/。

用法

1、获取标签

const allImgArr = editor.getElemsByType("image");

2、获取标签DOM

const imgDom = document.querySelector(`.editor-content #${item.id} img`);

3、获取node

const node = DomEditor.toSlateNode(editor, imgDom);

4、获取path

const path = DomEditor.findPath(editor, node);

5、修改数据

const itemClone = { ...item };
itemClone.src = dispalyUrl;

6、设置数据

SlateTransforms.setNodes(editor, itemClone, { at: path });

最终效果

最开始我的图片是base64的

经过处理（上传图床，获取到URL，将原来的base64替换成url）后动态更改了标签数据

​