允许选择开始和选择结束的富文本编辑器



我正在尝试实现一个接口,其中有一个富文本编辑器(RTE)和一个面板,允许用户将某些代码片段引入RTE。

我正在尝试的与 http://jsfiddle.net/timdown/wPfVn/完全相同,只是我想使用 RTE 而不是纯文本区域来做到这一点。

问题是所有 RTE 都用div 和 iframe 等替换文本区域。selectStartselectionEnd等文本区域函数不可用于检测光标位置。

是否有RTE通过我可以使用的API公开此类函数?

如果有人在某个网站上看到过这样的东西,请指出我。也许我可以ctrl + 你并弄清楚他们使用了什么。

解决:感谢马格斯的回答。可以使用TinyMCE编辑器。它有一个选择和选择书签的概念。以下是实现结果的方法。

tinyMCE.init({
    mode : "exact",
    elements: "notifierBody",           
});
$('.insertBtn').click(function(){
    // Stores a bookmark of the current selection
    var bm = tinyMCE.activeEditor.selection.getBookmark();
    // Restore the selection bookmark. In effect, takes the control that the bookmark
    tinyMCE.activeEditor.selection.moveToBookmark(bm);
    //Add new content right in the middle where your cursor/selection was
    tinyMCE.activeEditor.selection.setContent('Some new content');  
});

TinyMCE为当前选择获取了一些API。查看文档 : http://www.tinymce.com/wiki.php/API3:class.tinymce.dom.Selection

举个小例子:

tinyMce.activeEditor.selection.getContent({format : 'raw'}); // Get the selected text
tinyMce.activeEditor.selection.getStart(); // Selection start
tinyMce.activeEditor.selection.getEnd(); // Selection end

我认为许多RTE都提供此功能。您只需要查看 API 文档。

最新更新