javascriptrich-text-editorselection-api

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.

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.

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.

Is there an RTE which exposes such functions via an API which I can use?

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.

SOLVED: Thanks to the answer by Magus. One can use TinyMCE editor. It has a concept of selection and 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');  
});
Solution

  • TinyMCE gots some API for the current selection. Look at the documentation : 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. You just have to look the API documentation.