How to create a simple jQuery text editor

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

+5
source share
7 answers

I suggest: jqueryte

It is wonderful and simple;)

+13
source

I forked the jQueryTE plugin (an excellent text editor with a minimum size) and made it compatible with jQuery Mobile - now it resizes using a browser and the panel will span 2 lines if necessary (portrait view on iPhone, for example).

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

Screening for what it looks like:

Portrait

Portrait

Landscape

enter image description here

+7
source

. . , .

.

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/

, , , .

EasyEditor - https://github.com/im4aLL/easyeditor . . , node, , node node. , .

, , , .

EasyEditor

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

+2
+1

You can choose one of the following options: http://www.queness.com/post/212/10-jquery-and-non-jquery-javascript-rich-text-editors

I personally prefer the TinyMCE editor, not jquery.

0
source

CKEditor is my option for a decent editor.

0
source

All Articles