Как создать простой текстовый редактор jquery

Question

Я создаю новый проект, который нуждается в простом редакторе HTML. Как я могу создать простой текстовый редактор, используя jquery?

Answer 1

Я предлагаю, чтобы: jqueryte

Это замечательно и просто;)

Answer 2

Я разветвил плагин jQueryTE (отличный, минимальный форматированный текстовый редактор) и сделал его совместимым с jQuery Mobile - теперь он изменяет размеры с помощью браузера, и панель будет занимать 2 строки, если необходимо (например, просмотр портрета на iPhone).

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

Скриншот того, как это выглядит:

Портрет

Пейзаж

Answer 3

Я искал идеальный ответ.Но не нашел ни одного из них.Наконец прошел основы.

Вот как я это сделал.

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

Демонстрация в реальном времени - https://jsfiddle.net/im4aLL/Lyusxq3p/

Я вытащил основную идею и наконец сделалто, что я использую в своих будущих проектах.

Я сделал EasyEditor - https://github.com/im4aLL/easyeditor из концепции выше.Есть еще много дел.Например, когда вы оборачиваете узел, вы должны проверить, что выбор уже обернут другим узлом или тем же узлом.Также есть множество функций, которые вам нужно преодолеть.

Или вы можете попробовать мой легкий плагин, который я сделал для парней вроде вас, которым нужно полностью гибкое решение для интеграции его с другим приложением.

Вотдемоверсия и документация по использованию EasyEditor

• Демо: http://habibhadi.com/lab/easyeditor/
• Примеры: http://habibhadi.com/lab/easyeditor/examples.html
• Документация: http://habibhadi.com/lab/easyeditor/documentation.html

Использование

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

Answer 4

для него вы можете напрямую скачать код текстового редактора, а из своего приложения вы можете загрузить его со следующих сайтов:

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

Answer 5

С помощью простого поиска вы можете найти множество редакторов, поэтому я рекомендую этот 10 плагинов для текстового редактора jQuery

Answer 6

CKEditor - мой выбор для достойного редактора.

Answer 7

Вы можете выбрать один из них: http://www.queness.com/post/212/10-jquery-and-non-jquery-javascript-rich-text-editors

Я лично предпочитаю TinyMCE, редактор не jquery.