如何从 TinyMCE 获取高亮文本？

Posted 2023-02-19

【中文标题】如何从 TinyMCE 获取高亮文本？

【英文标题】：How to get the highlight text from TinyMCE?

【发布时间】：2018-08-19 14:48:10

【问题描述】：

我想提取用户使用 TinyMCE 突出显示的文本。我已经能够使用 TinyMCE API 提取整个文本，甚至只是使用getNode() 选择的段落。我以为getSel() 会这样做，但它返回一个对象，我想要字符串。

var content = tinymce.activeEditor.selection.getSel();
console.log(content);

返回：

Selection anchorNode: text, anchorOffset: 259, focusNode: text, focusOffset: 286, isCollapsed: false, …

TinyMCE：https://www.tinymce.com/docs/api/tinymce.dom/tinymce.dom.selection/#getsel

我还在 javascript 中找到了 getSelection，但它似乎在 Chrome 中无法正常工作。无论哪种方式，如果可能的话，我更喜欢使用 TinyMCE API。 https://developer.mozilla.org/en-US/docs/Web/API/Window/getSelection

【参考方案1】：

基于tinymce.com/docs/api/tinymce.dom/tinymce.dom.selection/#getcontent的官方文档：

// Alerts the currently selected contents
alert(tinymce.activeEditor.selection.getContent());

// Alerts the currently selected contents as plain text
alert(tinymce.activeEditor.selection.getContent(format: 'text'));

你会这样写你的代码：

var content = tinymce.activeEditor.selection.getContent();
console.log(content);

[编辑] 或者获取纯文本内容：

var content = tinymce.activeEditor.selection.getContent(format: 'text');
console.log(content);

注意tinymce.activeEditor.selection.getContent() 和tinymce.activeEditor.getContent() 之间的区别。

tinymce.activeEditor.selection.getContent() - 在编辑器/textarea 中获取所选/突出显示内容的 html 或纯文本。

tinymce.activeEditor.getContent() - 获取编辑器/textarea的全部内容。

【讨论】：

这是整个内容。它是我现在所拥有的。我想要的只是用户突出显示的文本，

您的意思是，突出显示的文本中的 plain 文本？如果是这样，您可以将format: 'text' 传递给tinymce.activeEditor.selection.getContent()？实际上，如果您在内容中有“Lorem ipsum dolor sit amet”，并且用户选择了“dolor sit”文本，那么tinymce.activeEditor.selection.getContent() 将返回多洛尔坐。注意tinymce.activeEditor.selection.getContent() 和tinymce.activeEditor.getContent() 之间的区别。

tinymce.activeEditor.selection.getContent(format: 'text');

是的，传递format: 'text' 将让您只检索突出显示内容的纯文本部分，可能包含也可能不包含 HTML 标记。不客气！ =)

如何将此 tinymce.activeEditor.selection.getContent() 添加到对话框中的文本字段中，如链接插件 @SallyCJ