Reputation: 61

How to create Simple jquery text editor

I am creating a new project which needs a simple html editor. How can I create simple text editor using jquery?

Upvotes: 6

Answers (7)

Hadi

Reputation: 2905

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

Upvotes: 4

Jeff

Reputation: 12183

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: