一个富文本编辑器,允许selectionStart和selectionEnd

时间:2012-11-15 13:03:31

标签: javascript rich-text-editor

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

我正在尝试的内容与http://jsfiddle.net/timdown/wPfVn/完全相同,我只想使用RTE而不是简单的textarea。

问题是所有RTE都用div和iframe等替换textarea。像selectStartselectionEnd这样的textarea函数不能用于检测光标位置。

是否存在通过我可以使用的API公开此类功能的RTE?

如果有人在某个网站上看到过类似的内容,请指出。也许我可以ctrl + u并弄清楚他们使用过什么。

解决: 感谢Magus的回答。可以使用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');  
});

1 个答案:

答案 0 :(得分:0)

TinyMCE为当前选择提供了一些API。查看文档:{​​{3}}

一个小例子:

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

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