[英]A rich text editor that allows selectionStart and selectionEnd
I am trying to implement an interface, where there is a Rich Text Editor (RTE) and a panel on the side which allows the user to introduce certain code snippets into the RTE. 我正在尝试实现一个界面,该界面上有一个Rich Text Editor(RTE)和一个面板,该面板允许用户向RTE中引入某些代码段。
What I am trying is exactly like http://jsfiddle.net/timdown/wPfVn/ only that I want to do it with an RTE instead of a plain textarea. 我正在尝试的东西与http://jsfiddle.net/timdown/wPfVn/完全一样,只是我想使用RTE而不是纯文本区域来实现。
The problem is that all RTE's replace the textarea with divs and iframes etc. The textarea functions like selectStart
and selectionEnd
are not available to detect the cursor position. 问题是所有RTE都用div和iframe等替换了textarea。诸如selectStart
和selectionEnd
类的textarea函数不可用于检测光标位置。
Is there an RTE which exposes such functions via an API which I can use? 是否有RTE通过我可以使用的API公开这些功能?
If anyone has seen something like this on some site, please point me to it. 如果有人在某个网站上看到过类似的内容,请指向我。 Maybe I can ctrl+u and figure out what they've used. 也许我可以按Ctrl + U并弄清它们的用途。
SOLVED: Thanks to the answer by Magus. 解决:感谢Magus的回答。 One can use TinyMCE editor. 可以使用TinyMCE编辑器。 It has a concept of selection and selection.bookmarks. 它具有选择和selection.bookmarks的概念。 Here is how you can achieve the result. 这是您可以获得结果的方法。
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 gots some API for the current selection. TinyMCE为当前选择提供了一些API。 Look at the documentation : http://www.tinymce.com/wiki.php/API3:class.tinymce.dom.Selection 查看文档: http : //www.tinymce.com/wiki.php/API3 : class.tinymce.dom.Selection
A little example : 一个小例子:
tinyMce.activeEditor.selection.getContent({format : 'raw'}); // Get the selected text
tinyMce.activeEditor.selection.getStart(); // Selection start
tinyMce.activeEditor.selection.getEnd(); // Selection end
I think many RTE provide this functions. 我认为许多RTE都提供此功能。 You just have to look the API documentation. 您只需要查看API文档。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.