Comment créer jquery Simple éditeur de texte

Je bifurquais la jQueryTE plugin (un grand, un minimum d'éditeur de texte riche), et jQuery Mobile compatible - il maintenant redimensionne le navigateur, et le groupe va s'étaler sur 2 lignes si nécessaire (portrait-vue sur l'iPhone par exemple).

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

Un screenie de ce que cela ressemble:

Portrait

Paysage

Je cherchais la réponse parfaite. Mais n'ai pas trouvé l'un d'eux. Enfin suis allé à travers les notions de base.

Voici comment je l'ai fait.

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);
});

Démo Live - https://jsfiddle.net/im4aLL/Lyusxq3p/

Je arrachement de l'idée de base et enfin fait quelque chose que j'utilise dans mes futurs projets.

J'ai fait EasyEditor - https://github.com/im4aLL/easyeditor de concept ci-dessus. Il y a beaucoup plus de choses à faire. Comme quand l'enveloppant d'un nœud, vous devez vérifier la météo que la sélection déjà enveloppé avec un autre nœud ou même nœud. Il y a aussi beaucoup de fonctions dont vous avez besoin pour les surmonter.

Ou vous pouvez essayer de mon léger plugin que j'ai fait pour les gars comme vous qui ont besoin de la pleine solution flexible pour l'intégrer à une autre application.

Voici la démo et de la documentation pour l'utilisation EasyEditor

• Démo: http://habibhadi.com/lab/easyeditor/
• Exemples: http://habibhadi.com/lab/easyeditor/examples.html
• Documentation: http://habibhadi.com/lab/easyeditor/documentation.html

D'utilisation

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

Vous pouvez choisir l'un de ces: http://www.queness.com/post/212/10-jquery-and-non-jquery-javascript-rich-text-editors

Personnellement, je préfère TinyMCE, non jquery éditeur.