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

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

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

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

editor.selection.setRng(originalRange);

Answer 2

@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);

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

TinyMCE - Select text, alter text, update the editor and restore the selection

html

javascript

wysiwyg

range