如何在 TinyMCE 编辑器中以编程方式添加 html 标签？答案

【问题标题】：How to add html tag programmatically in TinyMCE editor?如何在 TinyMCE 编辑器中以编程方式添加 html 标签？
【发布时间】：2018-10-11 04:03:42
【问题描述】：

我正在使用TinyMCE 来编辑文本。当用户选择一些文本并按下按钮时，所选部分应使用<mark></mark> html 标签包裹。

我之所以不简单地向 tinymce 编辑器添加自定义文本格式按钮，是因为我也想触发对选定文本进行的其他操作（即复制并粘贴文本到其他位置）。

我该怎么做？

【问题讨论】：

【解决方案1】：

您可以将自己的自定义按钮添加到 TinyMCE 工具栏，并在单击时触发 JavaScript。然后，您可以使用编辑器 API 将选定的文本与标签一起包装，并根据需要执行其他工作。

这是一个显示基本过程的 TinyMCE Fiddle：http://fiddle.tinymce.com/N1gaab

【讨论】：

谢谢！您的解决方案非常适合在单个元素内进行标记。但是，我也希望这可以处理多个元素（例如，选择从第 1 段的中途开始，在第 2 或第 3 段结束）。内置的粗体、斜体等可以很好地做到这一点，所以我假设我需要使用 TinyMCE API 中的其他东西而不是 insertContent()。你有什么建议吗？
我解决了跨元素应用的问题，方法是将formats: {mark: { inline: 'mark' }}添加到Editor init属性，然后在按下按钮时调用this.state.editor.formatter.apply('mark')