允许 selectionStart 和 selectionEnd 的富文本编辑器答案

【问题标题】：A rich text editor that allows selectionStart and selectionEnd允许 selectionStart 和 selectionEnd 的富文本编辑器
【发布时间】：2012-11-15 23:01:42
【问题描述】：

我正在尝试实现一个界面，其中有一个富文本编辑器 (RTE) 和一个面板，允许用户将某些代码 sn-ps 引入 RTE。

我正在尝试的与 http://jsfiddle.net/timdown/wPfVn/ 完全一样，只是我想使用 RTE 而不是纯文本区域。

问题是所有 RTE 都将 textarea 替换为 div 和 iframe 等。selectStart 和 selectionEnd 等 textarea 函数无法用于检测光标位置。

是否有通过我可以使用的 API 公开此类功能的 RTE？

如果有人在某个网站上看到过类似的东西，请指点我。也许我可以 ctrl+u 并找出他们使用了什么。

已解决：感谢Magus的回答。可以使用 TinyMCE 编辑器。它有一个 selection 和 selection.bookmarks 的概念。以下是实现结果的方法。

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

【问题讨论】：

标签： javascript rich-text-editor

【解决方案1】：

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 文档。

【讨论】：