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

5vf7fwbs 于 2022-12-16 发布在其他

关注(0)|答案(3)|浏览(421)

我正在为TinyMCE开发一个插件。过程应该是这样的：
1)用户选择一些文本
2)他按下了我的自定义插件的工具栏按钮
3)执行一个自定义函数，该函数对选定文本执行自定义操作，例如，假设它用下划线标记包围选定文本：<u></u>
4)执行该操作后，所选文本将被插回进行选择的编辑器中
5)现在，不管所选文本是什么，我都使用编辑器的所有HTML并根据需要对其进行修改，例如向HTML中的每个标记添加自定义属性
6)有了新的HTML之后，我想把它插回到编辑器中
7)此外，选定的文本在过程结束时仍应突出显示

我正在努力完成步骤4-7。

我的问题分为2步：
A）我得到了选中的文本，我可以修改它。问题是我不知道如何将它设置回整个编辑器的文本。在插件中我知道：

var newSelectionHTML = ed.selection.getContent();

但是，如何使用newSelectionHTML更新编辑器文本的选定部分
B）我不知道如何修改整个编辑器的HTML并将其设置到编辑器中，同时保持用户选择。

ed.setContent(newHTML)

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

Html

来源：https://stackoverflow.com/questions/41359073/tinymce-select-text-alter-text-update-the-editor-and-restore-the-selection

3条答案

按热度按时间

bfnvny8b1#

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

赞(0）回复(0）举报 2022-12-16

oug3syen2#

当对话框第一次打开时，使用克隆存储你的范围

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

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

editor.selection.setRng(originalRange);

赞(0）回复(0）举报 2022-12-16

wbrvyc0a3#

不用jQuery.extend，只要调用范围的cloneRange方法，得到的范围可以直接在setRng中使用。

赞(0）回复(0）举报 2022-12-16

我来回答

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

3条答案

相关问题

热门标签

最新问答