记录如何在tinymce富文本编辑器中操作dom

记录如何在tinymce富文本编辑器中操作dom

最近业务遇到比较特殊的需求，需要在文档编辑器中操作dom结构，包括增加、修改dom的html结构、标签属性和内容，之前也是因为wangEditor中对这部分操作非常不友好，才换回tinymce。

前言

我其他文章中有tinymce的API汇总，但是基本纯翻译英文文档的API，由于原英文文档中API部分写的…实在一言难尽，所以翻译过来一样是一坨x，所以还是决定把自己用过的API结合自己的具体业务场景记录下来。

业务场景

只有描述清楚需求大家才能知道代码在干什么，直接读代码头又疼眼又干的。
话不多说，我面临的需求是在文档编辑器中将选中部分（可单行，可多行，可选中图片、表格等文档中存在的任何部分）变为一整块div，，然后对这一整块div进行各种操作，包括增加class、id、style等。

实现过程

首先，需要获取选中部分的dom结构，这部分在tinymce中API非常友好，直接使用tinymce.activeEditor.selection.getContent()，返回的是选中部分的内容，包含html结构，类型为String

  const selectContentString = tinymce.activeEditor.selection.getContent()

也可以使用tinymce.activeEditor.selection.getSelectedBlocks()方法，获取到的也是选中部分的html结构，但是数据类型是数组，数组中每个元素即为选中部分的每个html标签以及内部的内容

//选中部分内容的数组，html结构
   const selectContent = tinymce.activeEditor.selection.getSelectedBlocks() 

然后将获取到的内容，通过字符串拼接的方式将外层套上一层div，div中可以添加想要的一切东西，style、id以及自定义属性等等。

// 拼接好最后想要的效果的html，注意数据类型为String
const htmlReplce = `<div id="params=id=${this.workId}" style='background-color:rgb(205, 230, 235)>${selectContentString}</div>`;

然后可以使用tinymce.activeEditor.selection.setContent()方法将拼接好的html插入选中的区域

// 将选中部分重新设置为新HTML
tinymce.activeEditor.selection.setContent(htmlReplce);

这样就可以将选中部分变为一整块了，可以进行任意自己想要的操作了

其他

虽然这个过程很简单，但是难在tinymce的API文档很难懂，API的功能基本都是一个一个试出来的，我在这里记录一下，也节省其他人试错的时间。

// 获取选中部分的节点
const selection = tinymce.activeEditor.selection
let currentElement = selection.getNode()

// 获取选中部分节点的父节点
let parentElement = currentElement.parentNode

// 获取选中部分节点的子节点
let childrenNode = currentElement.childNodes

//删除节点，第一个参数是要删除的节点，第二个参数代表是否保留子节点
selection.dom.remove(currentElement, false)

有用的话，记得点点赞