How to create Simple jquery text editor

I suggest that: jqueryte

This is wonderful and simple ;)

I forked the jQueryTE plugin (a great, minimal rich text editor) and made it jQuery Mobile compatible - it now resizes with the browser, and the panel will span 2 lines if necessary (portrait-view on iPhone for instance).

https://github.com/jeffijoe/jQuery-TE

A screenie of what this looks like:

Portrait

Landscape

I was looking for perfect answer. But didn't found any of them. At last went through basics.

Here's how i did it.

HTML:

<div id="editor" contenteditable="true">Lorem Ipsum is simply dummy text</div>
<button id="make-bold">Make bold</button>

JS:

document.getElementById('make-bold').addEventListener('click', function(event){
    event.preventDefault();

    var selection = window.getSelection();
    var range = selection.getRangeAt(0).cloneRange();
    var tag = document.createElement('strong');

    range.surroundContents(tag);
    selection.addRange(range);
});

Live demo - https://jsfiddle.net/im4aLL/Lyusxq3p/

I pullout the basic idea by this and finally made something which i use in my future projects.

I made EasyEditor - https://github.com/im4aLL/easyeditor from above concept. There are lot more things to do. Like when are wrapping a node you need to check wheather that selection already wrapped with other node or same node. Also there are lot of functions you need to overcome.

Or you may try my lightweight plugin which i made for guys like you who need full flexible solution to integrate it with another application.

Here's the demo and documentation for use EasyEditor

• Demo: http://habibhadi.com/lab/easyeditor/
• Examples: http://habibhadi.com/lab/easyeditor/examples.html
• Documentation: http://habibhadi.com/lab/easyeditor/documentation.html

Usage

http://habibhadi.com/lab/easyeditor/default-example.html

for it you can directly download code of text editor and out it in your application you can download it from following sites:

http://www.intrepidstudios.com/projects/jquery-rich-text-editor/demo.aspx http://freshcode.co/plugins/jquery.contenteditable/demo.html

By a simple search you can find a lot of editors so I recommend this one 10 jQuery Text Editor Plugins

You may choose one of these: http://www.queness.com/post/212/10-jquery-and-non-jquery-javascript-rich-text-editors

I personally prefer TinyMCE, non jquery editor.

CKEditor is my option for decent Editor.