记录如何在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