TinyMCE - 选择文本、更改文本、更新编辑器和恢复选择

Question

我正在为 TinyMCE 开发一个插件。流程应该是这样的：

1) 用户选择了一些文本

2) 他按下了我的自定义插件的工具栏按钮

3) 执行一个自定义函数，对选定文本执行自定义操作，例如，假设它用下划线标签围绕选定文本：<u></u>

4) 完成操作后，所选文本会被插入到编辑器中进行选择的位置

5) 现在，无论选择什么文本，我都会获取所有编辑器的 HTML 并根据我的需要进行更改，例如为 HTML 中的每个标签添加自定义属性

6) 有了新的 HTML，我想将它重新插入到编辑器中

7) 此外，在过程结束时，所选文本仍应突出显示

我正在为第 4-7 步苦苦挣扎。

我的问题分为两步：

A) 我得到选定的文本，我可以更改它。问题是我不知道如何将其设置回整个编辑器的文本。在我做的插件中：

var newSelectionHTML = ed.selection.getContent();

但是如何使用 newSelectionHTML 更新编辑器文本的选定部分

B) 我不知道如何更改整个编辑器的 HTML 并将其设置到编辑器中，同时保持用户选择。

ed.setContent(newHTML)

这样做会删除用户选择并将光标移动到开头。如何在整个过程中保存用户选择（步骤 1-7）？

提前谢谢你。 阿萨夫

Answer 1

@jnoreiga 的回答几乎是我的解决方案。由于 tinymce 似乎期待一个具有 Range 类型的对象，因此它不会接受您的普通对象 originalRange

我只需要再次调用getRng，将其存储到一个新变量中并使用originalRange 属性设置该变量的属性

var originalRange = jQuery.extend(true, {}, editor.selection.getRng());

/*
 * Do some logic,
 * Then set current range to originalRange
 */

var newRange = editor.selection.getRng();

newRange.startContainer = originalRange.startContainer;
newRange.startOffset = originalRange.startOffset;
newRange.startContainer = originalRange.endContainer;
newRange.startOffset = originalRange.endOffset;

editor.selection.setRng(newRange);

Answer 2

在对话框首次打开时使用克隆存储您的范围

originalRange = jQuery.extend(true, {}, editor.selection.getRng());

然后当你想回到原来的选择

editor.selection.setRng(originalRange);