Tinymce 5自定义按钮调用insertContent方法生成不必要元素的问题求助

遇到这种情况，本质是TinyMCE默认会对插入的内容做HTML解析、自动格式化（比如包裹段落标签、转义特殊字符），导致你想要的纯文本内容被额外处理了。不用invalid_elements的话，咱们可以通过强制插入原始内容的方式解决，具体修改如下：

修改后的按钮代码 #

setup: function (editor) {
  editor.ui.registry.addButton('mathLine', {
    icon: 'code-sample',
    tooltip: 'mathLine',
    onAction: function (_) {
      // 使用insertContent并指定format为raw，强制插入原始内容
      editor.insertContent('{literal}\\(\\){/literal}', { format: 'raw' });
    },
  });
}

关键说明 #

• { format: 'raw' }是核心参数：它告诉TinyMCE不要对插入的内容做任何HTML解析、格式化或字符转义操作，完全按照你提供的文本原样插入到编辑器中。
• 之前的写法没有指定格式，编辑器会默认把你的内容当作HTML处理，可能会自动添加<p>标签，或者转义\这类特殊字符，最终生成你不需要的额外元素。

备选方案（如果上面的方法不生效） #

如果因为编辑器版本或其他插件冲突导致format: raw不生效，可以尝试用execCommand插入原始HTML：

setup: function (editor) {
  editor.ui.registry.addButton('mathLine', {
    icon: 'code-sample',
    tooltip: 'mathLine',
    onAction: function (_) {
      editor.execCommand('mceInsertRawHTML', false, '{literal}\\(\\){/literal}');
    },
  });
}

mceInsertRawHTML命令的作用就是直接插入未经过处理的原始内容，和format: raw的效果一致。

内容的提问来源于stack exchange，提问作者Егор Петров