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

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

2 个答案: