I am looking for a very minimal jQuery rich textbox plugin for a web app I am working on.

The user will only need to see the 'textbox', and not any toolbars as all of the rich formatting will be coded depending on what they type.

I have attempted to create my own with an iframe, but there are problems. One of them being when wrapping strings in divs, the caret is moved to the beginning and it can't be moved inside the div without clicking. /

This is a problem because I need it to behave like a normal textbox. In a normal textbox, you would be able to navigate with the arrow keys without having to click. Hence why I am looking for a plugin which has already overe these problems.

I am looking for a very minimal jQuery rich textbox plugin for a web app I am working on.

The user will only need to see the 'textbox', and not any toolbars as all of the rich formatting will be coded depending on what they type.

I have attempted to create my own with an iframe, but there are problems. One of them being when wrapping strings in divs, the caret is moved to the beginning and it can't be moved inside the div without clicking. http://jsfiddle/DVjYa/

This is a problem because I need it to behave like a normal textbox. In a normal textbox, you would be able to navigate with the arrow keys without having to click. Hence why I am looking for a plugin which has already overe these problems.

• javascript
• jquery
• jquery-plugins
• richtextbox

• See the first two answers to this question: stackoverflow./questions/1181700/… – bfavaretto Commented Feb 6, 2012 at 12:43

3 Answers 3

You can use CLEDITOR which is very lightweight. You can disable all the toolbar buttons and hide the toolbar as well. In addition to this, it lets you make the selection bold/italic using keyboard shortcuts (CTRL+B/CTRL+I) even though the toolbar does not exist.

Demo: http://jsfiddle/Rft3A/

var editorDoc;

$(function() {
    var editor = document.getElementById ("editable");

    if (editor.contentDocument) {
        editorDoc = editor.contentDocument;
    } else {
        editorDoc = editor.contentWindow.document;
    }

    var editorBody = editorDoc.body;
    if ('contentEditable' in editorBody) {
        // allow contentEditable
        editorBody.contentEditable = true;
    }
    else {  // Firefox earlier than version 3
        if ('designMode' in editorDoc) {
            // turn on designMode
            editorDoc.designMode = "on";                
        }
    }
});

will add another answer although post is a little old

Trumbowyg A lightweight and amazing WYSIWYG JavaScript editor - 15kB only (from github page)