vue 富文本编辑器TinyMCE 设置内容中的部分标签为不可编辑

本文介绍如何在Vue项目中使用TinyMCE富文本编辑器，确保特定固定标签不可编辑。通过引入noneditable插件并结合编辑器的`init`和`setup`方法，设置class为'non-editable'的元素为不可编辑状态。当插入带有此类的标签后，用户无法修改这些标签，只能整体删除，防止误操作导致模板解析错误。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

场景：在利用富文本编辑器TinyMCE 设置消息模板时，需要嵌入一些固定标签，固定标签用于后台解析模板时动态组装数据数据，嵌入的标签为文本格式，容易被误修改，造成无法解析这个固定标签

如图：

点击页面的固定标签会在富文本编辑器光标位置插入标签文本。

解决方案：我们需要设置这个标签文本为不可编辑状态，这样就能避免误操作了，富文本编辑器提供了一个插件（noneditable）可以设置元素不可编辑，我们使用此插件以及一些api和时间来实现此功能。

引入插件：

然后可以使用 `init` 方法来初始化编辑器，并通过设置 `setup` 回调函数来处理编辑器的事件和自定义功能。

setup: function (editor) {
						editor.on('init', function () {
							this.getBody().style.fontSize = '14px';
							// 在编辑器初始化完成后，设置部分内容不可编辑
							const body = editor.getBody();
							// 获取需要设置为不可编辑的元素
							const elementsToMakeNonEditable = body.querySelectorAll('.non-editable');
							// 遍历元素，并设置为不可编辑
							elementsToMakeNonEditable.forEach((element) => {
								editor.dom.setAttrib(element, 'contenteditable', false);
							});
						})

						// 监听编辑器的 change 事件，获取最新的内容，并设置部分内容不可编辑
						editor.on('change', () => {
							const body = editor.getBody();
							// 获取需要设置为不可编辑