Jquery текстовый редактор. Визуальный редактор на jQuery

Несмотря на то, что WYSIWYG и Markdown визуальные редакторы имеют ограниченные возможности по сравнению с редакторами исходного кода, они могут значительно упростить редактирование базового контента страницы. Поэтому в данном посте мы собрали самые лучшие WYSIWYG и Markdown визуальные редакторы контента, которые могут быть использованы как в бэкэнд, так и в фронтэнд разработке сайта.

ContentToolsНаиболее оригинальный текстовый из данной подборки. Однако, он подойдет не для всех проектов из-за его специфичности.

ContentTools внедряется в саму страницу с контентом. Чтобы начать ее редактировать, нужно нажать на соответствующую иконку, после чего появится панель редактирования контента . Это очень удобно, так как при создании материала мы сразу видим, как он будет выглядеть на странице.

Лично мне кажется, что он отдаленно похож на редактор Evernote , но с другой панелью инструментов.

AlloyEditorВизуальный редактор контента AlloyEditor построен на базе популярного CKEditor. Он очень похож на редактор Medium.com и обладает довольно широкими функциями, такими как: Drag&Drop загрузка изображений, различные стили оформления панели инструментов и пр.

Это тот редактор, которым действительно приятно пользоваться.

SimpleMDEСинтаксис Markdown довольно сложен для его понимания рядовому пользователю у которого цель просто добавить контент на страницу. Разработчики SimpleMDE попытались сделать Markdown редактор таким, чтобы в нем мог работать любой человек, даже без особых технических знаний.

SubstanceSubstance – это простой визуальный редактор контента на JavaScript . С ним с легкостью сможет работать любой пользователь, который решит добавить контент на ваш сайт.

Editor.mdВстраиваемый онлайн markdown редактор с открытым исходным кодом. Для удобства использования он разделен на две части. Слева - традиционная Markdown-разметка, а справа находится визуальное представление контента.

Есть tinyMCE - монстрообразные, не гибкие, их сложно изменять под задачи сайтов и интерфейсов. Есть небольшие, простые, они часто с ужасным дизайном, не развиваются, не поддерживаются. Как настоящий разработчик, несколько лет назад я решил написать свой редактор и в течение этого времени постоянно развивал его и упрощал. Суть редактора постепенно свелась к простым требованиям:

• он должен быть красивым и одновременно ненавязчивым, чтобы вписывался без внешних изменений почти в любой интерфейс;
• обязательно быстрым и легкий, потому что никому не нравится сидеть даже полминуты в ожидании загрузки всех кнопок и плагинов;
• гибкий для разработки, доработки и встраивания под все возможные нужды;
• с простым и понятным интерфейсом. В идеале визуальный редактор - это просто поле для ввода текстов, без лишних кнопок и функций. Просто люди пишут тексты в вебе и это все что им нужно.

На мой взгляд каждую из этих задач удалось решить и вот что из этого получилось:

На сайте редактор можно потрогать, попробовать в действии, скачать бесплатно и свободно встраивать в свои собственных проекты.
Редактор написан на jQuery, но в необычном стиле, не так как плагины для этой библотеки, это оправдано, по двум причинам:

потому что хотелось избежать запутанности множества функций и сделать код наиболее гибким;

редактор не плагин, а самостоятельная вещь в себе.

Тем не менее редактор не требует никаких сторонних плагинов и расширений, просто нужно подключить базовый файл jQuery, сам редактор и все заработает.

Потому что хочется совершенствовать, хочется свести ошибки к нулю, чтобы их просто не было. Хочется чтобы на всех сайтах был хороший редактор и не нужно было бы мучаться с кучей различных решений.

Почему нет кнопки «очистить от мусора Ворда»?

Это задача на стороне сервера, так как этой кнопкой никто не пользуется, обычные пользователи и даже редакторы, журналисты не понимают зачем она нужна. Если есть возможность решить проблему за счет автоматических и программных методов - ее нужно решить этими методами, не перекладывая на пользователя.

Почему нет той или иной кнопки и расширений редактора?

В этом одна из целей - убрать все лишнее. Каждый раз при желании придумать расширение надо бить себя по рукам.

Будет ли развиваться и дополняться документация?

Обязательно, в том числе на основе отзывов и вопросов.

Поддерживается ли IE6?

Нет и не будет.

Что планируется сделать в следующей версии?

• Локализация (английский и русский в одном пакете);
• Переработать и сделать удобным вставку и управление таблицами.

P. S. Как я и писал выше, Редактор хочется сделать еще лучше, поэтому если кто-то хочет переписать ту или иную функцию, хочет внести разумное предложение, пожалуйста, присоединяйтесь, на сайте редакторе есть куда писать с предложениями. Автор каждого внесенного изменения будет отмечен как соавтор со всеми соответствующими ссылками.

Очень часто в процессе редактирования контента сайта необходимо (а также очень удобно) видеть готовый результат на странице браузера. Используя свойство тегов HTML5 - contenteditable, Jquery, Ajax и PHP создадим простой редактор текста HTML5 сайта.

Наш редактор будет обладать следующими свойствами:
- при клике мышкой на тексте предназначенном для редактирования этот текст сразу можно редактировать;
- при нажатии клавиши Escape после редактирования текста, все изменения в текущий текст отменяются;
- при потере фокуса, либо клике для редактирования другого текста, измененный текст отправляется на сервер, выводится сообщение о статусе отправки и ответа сервера.

Ниже приводится HTML код редактируемой страницы:

Простой jquery скрипт для редактирования HTML5 текста и его сохранения с помощью ajax Демонстрация работы редактируемого HTML5 текста, с последующей передачей и записью посредством Jquery-Ajax-Php-mysql. Пример редактируемого текста html 5. Для редактирования нажмите мышкой на любой текст. Для записи просто нажмите мышкой в другое место или на кнопку сохранить. Сохранить

Как видим, каждый редактируемый текст заключен в тег с включенным свойством contenteditable - фишкой HTML5, которая позволяет редактировать текст прямо в браузере. Для сохранения на сервере нужно точно идентифицировать редактируемый текст, поэтому id у нас содержит идентификатор материала и поле базы данных, разделенных нижним подчеркиванием, например - id=«item1_title».

В заголовке нашей страницы подключаем style.css и jquery:

Простой скрипт jquery для редактирования текста и сохранением с помощью ajax

var contentold={}; //объявляем переменную для хранения неизменного текста function savedata(elementidsave,contentsave) { //функция для сохранения отредактированного текста с помощью ajax $.ajax({ url: "save.php", //url который обрабатывает и сохраняет наш текст type: "POST", data: { content: contentsave, //наш пост запрос id:elementidsave }, success:function (data) { //получили ответ от сервера - обрабатываем if (data == contentsave) //сервер прислал нам отредактированный текст, значит всё ok { $(elementidsave).html(data); //записываем присланные данные от сервера в элемент, который редактировался $("Данные успешно сохранены:"+data+"") //выводим сообщение об успешном ответе сервера.insertAfter("#"+elementidsave) .addClass("success") .fadeIn("fast") .delay(1000) .fadeOut("slow", function() {this.remove();}); //уничтожаем элемент } else { $("Запрос завершился ошибкой:"+data+"") // выводим данные про ошибку.insertAfter("#"+elementidsave) .addClass("error") .fadeIn("fast") .delay(3000) .fadeOut("slow", function() {this.remove();}); //уничтожаем элемент } } }); } $(document).ready(function() { $("") //редактируемый элемент.mousedown(function (e) //обрабатываем событие нажатие мышки { e.stopPropagation(); elementid=this.id; contentold=$(this).html(); //текст до редактирования $(this).bind("keydown", function(e) { //обработчик нажатия Escape if(e.keyCode==27){ e.preventDefault(); $(this).html(contentold); //возвращаем текст до редактирования } }); $("#save").show(); //показываем кнопку "сохранить" }) .blur(function (event) //обрабатываем событие потери фокуса { var elementidsave=this.id; //id элемента потерявшего фокус var contentsave = $(this).html(); //текст для сохранения event.stopImmediatePropagation(); if (elementid===elementidsave) // если id не совпадает с id элемента, потерявшего фокус, {$("#save").hide(); } // значит фокус в редактируемом элементе, кнопку не прячем if (contentsave!=contentold) //если текст изменился { savedata(elementidsave,contentsave); //отправляем на сервер } }); });

Принимаем наш отредактированный текст на сервере - файл save.php

Особенно удобен наш редактор для табличных данных (например прайс), где не нужно текстовое оформление, а необходимо быстро поправить, либо внести новые данные (модернизируем скрипт). Для себя я модернизирую скрипт, чтобы вносить, заполнять базу данных товаров. Заполнять базу таким способом будет также удобно, как в Excel-е, которому мы так привыкли.

Однажды мне потребовался WYSIWYG редактор, я помнил как он выглядит, его функции, но не помнил названия. Через 45 минут я все же его нашел… Тогда я поставил перед собой задачу помочь многим, в том числе и себе: сделать сводный список всех чуть более известных WYSIWYG редакторов.

Вступление Данный топик представляет собой обширный список визуальных редакторов, почти или частично пригодных для использования. Цель, которой я руководствовался, заключался в том, чтобы систематизировать существующие данные, разбросанные по интернету.TinyMCE
Один из самых распространенных визуальных редакторов, обладает недюжинным функционалом. Есть множество дополнений, по умолчанию установлено множество плагинов.
(Браузеры: Mozilla 1.3+, MSIE 5.5+, Opera 9.0+, Safari, Chrome)
[Официальный сайт | Демо ]CKeditor
Полный аналог TinyMCE.

[Официальный сайт ]CLEditor

Незамысловатый визуальный редактор, особенных функционалом не балует. Но сделан вполне добротно, качественно реализованы все функции.
(Браузеры: Firefox 1.5+, Opera 9.50+, Safari 3.0+, Camino 1.0+, Internet Explorer 5.5+, Google Chrome)
[Официальный сайт ]NicEdit

Редактор очень похож на CLEditor. Обладает стандартным функционалом.
(Браузеры: Firefox 1.5+, Opera 9.50+, Safari 3.0+, Internet Explorer 5.5+, Google Chrome)
[Официальный сайт ]elRTE

Очень качественный визуальный редактор. Обладает широким функционалом. Сделан очень качественно.
(Браузеры: Firefox 3.5+, Opera 10+, Safari 3.0+, Internet Explorer 7+, Google Chrome)
[Официальный сайт | Демо ]Spaw

Очень средний визуальный редактор. Обладает стандартным функционалом.

[Официальный сайт | Демо ]Xinha

Неплохой визуальный редактор, отличительная особенность - множество встроенных action"ов. Т.е. настроить его под свои нужды не составит трудностей.
(Браузеры: Firefox 1.5+, Opera 9+, Safari 3.0+, Internet Explorer 5.5+, Google Chrome)
[Официальный сайт | Демо ]Imperavi (Платный)

Достаточно милый редактор, функционал не большой, но его вполне хватает. Существует ряд ошибок связанных с переходом от html к визуальному редактору и обратно. (убираются align"ы) Важно заметить, что Imperavi работает как плагин к JQuery.
Имеется неплохая документация .
(Браузеры: Firefox 1.5+, Opera 9+, Safari 4+, Internet Explorer 7+, Google Chrome)
[Официальный сайт | Демо ]Markitup

Markitup больше похож на удобный редактор html, который больше подойдет профессионалу, нежели рядовому пользователю. Но если вы знаете html, то он может оказаться вполне удобным.
(Браузеры: Firefox 3+, Opera 9+, Safari 3+, Internet Explorer 6+, Google Chrome)
[Официальный сайт | Демо ]Aloha Editor

Неплохой редактор, очень удобен. Однако существует огромный минус, который затмевает почти все плюсы - это отказ от поддержки старых и не очень браузеров (доступны только последние версии браузеров).
(Браузеры: Требуется поддержка HTML5, Opera не поддерживается)
[Официальный сайт | Демо ]Mercury editor

Mercury представляет собой цельную веб-страницу, и может быть использован для редактирования целой страницы или отдельных определенных областей. Он поддерживает функцию предварительного просмотра отредактированного содержимого, а также размещение ссылок, изображений, видео и таблиц. Загрузка файлов может быть осуществлена посредством интерфейса drag"n"drop.
Редактор также поддерживает совместную работу нескольких человек. Mercury может быть установлен в качестве отдельного Rails, либо за счет внедрения в код страницы. (Требуется JQuery)
И минус в том, что поддерживаются только следующие браузеры: Chrome 10+, Safari 5+, Firefox 4+.
[Официальный сайт | Демо на главной странице]YUI Rich Text Editor

Визуальный редактор от Yahoo. Как справедливо заметил sdevalex , один из лучших визуальных редакторов. Обладает исчерпывающим функционалом, поддерживает подавляющим большинством браузеров.
[Демо ]MooEditable

Набор функций сильно ограничен, однако порой больше и не требуется.
[Демо ]OpenWysiwyg

Кросс-браузерный полноценный редактор со всеми требуемыми функциями. Он даже включает в себя привлекательные выпадающие меню и кнопки. К сожалению, Chrome не будет поддерживать его.
(IE 5.5+, Firefox 1.0+, Mozilla 1.3+ and Netscape 7+)

Наверняка, Вы много раз сталкивались с визуальными редакторами , позволяющими достаточно удобно формировать внешний вид страниц, либо каких-то сообщений, например, на форуме. Причём не с BB-кодами , а сразу получая конкретный результат. Этих редакторов достаточно много в Интернете. Один из самых популярных - это TinyMCE , однако, я сторонник собственных скриптов и считаю, что для каждой задачи должно быть своё решение , а не универсальное. Поэтому в этой статье я расскажу, как создать визуальный редактор на JavaScript .

Сразу привожу достаточно хорошо прокомментированный код:

// Вывод кнопок редактирования
document.write("");
document.write("");
document.write("
");
document.write(""); // Добавляем iframe
/* В зависимости от браузера получаем доступ к созданному фрейму */
var isGecko = navigator.userAgent.toLowerCase().indexOf("gecko") != -1;
var iframe = (isGecko) ? document.getElementById("frameId") : frames["frameId"];
var iWin = (isGecko) ? iframe.contentWindow: iframe.window;
var iDoc = (isGecko) ? iframe.contentDocument: iframe.document;
/* Создаём код пустой HTML-страницы */
iHTML = "";
iDoc.open(); // Открываем фрейм
iDoc.write(iHTML); // Добавляем написанный код в фрейм
iDoc.close(); // Закрываем фрейм
iDoc.designMode = "on"; // Включаем режим редактирования фрейма
/* Функции для задания внешнего вида выделенного текста
Полный набор возможных команд: http://javascript.itsoft.ru/execcom/execCommands.html */
function setBold() {
iWin.focus();
iWin.document.execCommand("bold", null, "");
}
function setItal() {
iWin.focus();
iWin.document.execCommand("italic", null, "");
}
function save() {
/* Сохранение HTML-кода в поле hidden, чтобы потом можно было передать полученный HTML-код в скрипт-обработчик */
document.getElementById("content").value = iDoc.body.innerHTML;
return true;
}

На первый взгляд, кажется, что код очень сложный. И так оно и есть, но если рассмотреть его по базовым элементам, то ничего сложного нет. Есть обычная форма и поле hidden , куда сохраняется получившийся в редакторе HTML-код . Сам редактор - это обычный фрейм, то есть обычная HTML-страница , в которой мы можем писать текст (designMode = "on" ). А различные форматирования создаются с помощью метода execCommand() , который выполняет указанную в параметре команду. А уж создать новые кнопки и прикрепить к ним аналогичные обработчики, думаю, что не составит для Вас труда.

В этом скрипте нет ничего лишнего, только самое главное и основное, и его можно брать за основу для создания собственного визуального редактора на JavaScript , в котором не будет ничего лишнего, а только то, что нужно Вам.