tinymce富文本编辑器中的部分内容不可编辑

tinymce编辑器中的权限控制

老规矩，先介绍需求，防止大家看半天不知道在看什么。
最近需要在文档编辑器中控制每一段的权限，包括是否显示、是否可编辑。
如果你仅仅只是使用tinymce编辑器，没有自定义功能，没有改变它原有的html结构，那么你文档中的元素应该大部分都是p标签、h标签、li标签、table标签以及img标签等；如果你和我一样在编辑器内的html结构上进行了很多操作，那么你的文档结构会多出了很多div以及嵌套结构。别担心，下面分情况介绍各种解决办法。

对span标签的控制

可以在span标签内写入class="mceNonEditable"的类，这样可以span内的东西就无法编辑了。

const selection = tinymce.activeEditor.selection
selection.setContent('<span class="mceNonEditable">测试内容</span>')

效果如下

内容会变为一整块，鼠标移入会显示无法点击的样式

但是这种做法会有一些小bug，只能控制span标签内的文字内容，即使你在嵌套结构中增加多个span，这些span在tinymce编辑器中最终呈现出来也会被合并为一个span，这显然会影响功能，并且span内也是不能嵌套其他标签（强行嵌套要么不生效要么出其他问题）

对div标签的控制

我们操作完span标签，打开F12查看html结构发现，添加class="mceNonEditable"的类后，标签内会自动生成contenteditable="false"的属性，那么大胆猜测，只要添加这个属性就可以控制标签的编辑状态。尝试过后，果然，而且不止对span生效，对div也是生效的。
我在tinymce编辑器中增加了很多自定义操作，使内容可以改变结构，选中部分识别后会成为一整块div

在div中加上contenteditable="false"后

tinymce.activeEditor.selection.setContent(`<div style='background-color:rgb(205, 230, 235);padding: 20px 20px' contenteditable="false"><img style="width: 24px; position: absolute; left: 75px" src="http://sztaskhub010.rigoltech.com:8999/file/20230629170309548.png">${selectContentString}</div>`)

这一整块都无法编辑了，鼠标移入会变成不可点击状态。成功

对tinymce原本的标签操作

很遗憾，原来文档结构中的p标签和h标签，并不能设置contenteditable=“false”（不生效），如果要对这些内容设置不可编辑，可以参考我另一篇文章，先将他们嵌套进div中，然后增加contenteditable=“false”

对input,select,radio, checkbox, button，option等标签

直接在标签中设置disabled="disabled"即可，这是基本的html标签操作