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

Однажды мне потребовался 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+)

Несмотря на то, что 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. Как я и писал выше, Редактор хочется сделать еще лучше, поэтому если кто-то хочет переписать ту или иную функцию, хочет внести разумное предложение, пожалуйста, присоединяйтесь, на сайте редакторе есть куда писать с предложениями. Автор каждого внесенного изменения будет отмечен как соавтор со всеми соответствующими ссылками.

    Как известно, встроенное редактирование, или другими словами, возможность редактирования контента непосредственно на странице, - это очень полезная вещь, которая всегда должна быть у вас под рукой. Я расскажу, как всё это работает, а также покажу, как с помощью PHP моментально обновить отредактированную часть на странице, и как внести все изменения в базу данных.

    Код

    Сейчас я объясню, что же все-таки представляет собой встроенное редактирование.

    На Demo странице вы увидите блок с некоторым текстом. Наведите курсор на любую часть этого блока, и вы увидите маленькую иконку редактирования. Она похожа на иконку из Facebook.

    Если вы кликните внутри блока с текстом или на саму иконку, то блок заменится формой textarea, а внизу появятся кнопки save и cancel.

    Теперь подробнее

    Я использовал связывание и “развязывание”. Простыми словами, мы можем привязать элементу событие клика мышкой. И наоборот, можно “отнять” у элемента это событие. Всё довольно просто. В 9ой строчке кода, представленного ниже, мы назначаем событие клика всем элементам с классом “inlineEdit”, а обработчиком назначаем функцию “updateText”. Это означает, что каждый раз при клике внутри блока “inlineEdit”, будет запускаться функция “updateText”. Эта функция заменяет блок с текстом формой textarea.

    Теперь рассмотрим функцию сохранения. Она будет запускаться только при клике на кнопку “Save”. Здесь мы просто забиваем отредактированный текст в переменную и прогоняем ее через файл update.php. Вы заметите, что пока идет обновление, отображается иконка загрузки. Мы также выведем сообщение с ответом от страницы PHP. В конце мы удалим класс “selected” у элемента и затем вставим обновленный текст из textarea, введенный пользователем, в блок div.

    Функция cancel запуститься при активировании элемента с классом.revert. Эта функция просто удаляет класс “selected”, как и в предыдущей функции, но вставляет в блок div оригинальный, а не отредактированный текст.

    $(document).ready(function () { function slideout() { setTimeout(function () { $("#response").slideUp("slow", function () {}); }, 2000); } $(".inlineEdit").bind("click", updateText); var OrigText, NewText; $(".save").live("click", function () { $("#loading").fadeIn("slow"); NewText = $(this).siblings("form").children(".edit").val(); var id = $(this).parent().attr("id"); var data = "?id=" + id + "&text=" + NewText; $.post("update.php", data, function (response) { $("#response").html(response); $("#response").slideDown("slow"); slideout(); $("#loading").fadeOut("slow"); }); $(this).parent().html(NewText).removeClass("selected").bind("click", updateText); }); $(".revert").live("click", function () { $(this).parent().html(OrigText).removeClass("selected").bind("click", updateText); }); function updateText() { $("li").removeClass("inlineEdit"); OrigText = $(this).html(); $(this).addClass("selected").html("" + OrigText + "" ").unbind("click", updateText); } });

    PHP HTML

    HTML очень прост и представляет собой один элемент списка с классом “inlineEdit”, что делает его редактируемым. Вы сможете добавить сколько угодно редактируемых элементов на страницу, но не забывайте назначать каждому из них уникальный идентификатор.

    jQuery Inline-Edit Click the text below to edit it.

    • Lorem Ipsum....


    Я искала визуальный редактор, приятный глазу, чтобы не пришлось переделывать дизайн и лишний раз тратить время. В процессе, я нашла и испытала несколько визуальных редакторов.Монтаж визуальных редакторов на сайт представляет простую систему действий. Нужно поставить в тег HEAD ряд запросов на скрипты (предварительно загрузив всю папку с визуальным редактором на сервер). В скаченных файлах обычно предоставляется демо-версия использования, именно из кода этой страницы легко получить названия нужных скриптов. Здесь же небольшой код, употребляемый в BODY страницы, для непостредственного использования редактора. Его мы будем размещать на место в html-форме, где нам нужно.
    Визуальные редакторы делятся на виды, используя различную обработку. Так, я встретила визуальные редакторы, основанные на jQuery, MooTools, ActiveX и просто JavaScript.

    Визуальные редакторы с использованием MooTools
    Мне попались весьма интересные визуальные редакторы, основанные на этой технологии. Однако, из-за несовместимости со скриптами jQuery, уже употребляемыми на сайте для других нужд, я продолжила поиски чего-то более универсального.

    Пример визуального редактора MooEditable с использованием MooTools

    Скрипты, вставляемые между тегами :

    window.addEvent("load", function(){ $("textarea-1").mooEditable(); // Post submit $("theForm").addEvent("submit", function(e){ alert($("textarea-1").value); return true; }); });

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

    Textarea 1 —Здесь текст, написанный в визуальном редакторе—

    Здесь используется стандартный тег формы TEXTAREA, что сделает поле ввода рабочим даже при условии отключеия
    JavaScript у пользователя (хотя все опции визуального редактора работать не будут).
    Скачать визуальный редактор MooEditable

    Пример ggEdit, визуальный редактор на основе MooTools
    В FireFox этот визуальный редактор («ggEdit») отказался работать вовсе. Как пользователю Mozilla, меня это совершенно не устроило.
    Впрочем, интерфейс у такого визуального редактора (пример «ggEdit» (исходник можно скачать )) мне понравился.

    Визуальные редакторы на основе jQuery
    Этот визуальный редактор (WKRTE), возможно, был бы хорош, если бы модульные окна (вставка изображения, ссылки) не всплывали за рамкой экрана
    Пример WKRTE, визуальный редактор на основе jQuery:

    Примечательно, что основные скрипты вставляются не в …, где, в основном, запросы на стили (CSS):

    Основные скрипты окажутся перед закрывающим тегом :

    --Какое-то содержимое-- $(document).ready(function() { var arr = $(".wkrte-1").rte({ width: 720, height: 520, controls_rte: rte_toolbar, controls_html: html_toolbar }); });

    Визуальный редактор AJAX, jQuery, JavaScript

    Этот визуальный редактор («CKEditor») использует богатую палитру технологий в своих примерах использования. Хотя AJAX здесь выполняет скорее вспомогательные — а не ключевые — функции визуального редактора. Основная библиотека: jQuery, JavaScript.
    Не проводила скрупулезного тестирования на предмет кроссбраузерности, но в моих браузерах работает на «ура», что не могло не обрадовать. Дополнительный плюс — Русский язык!

    Скрипты : могут быть разные. Один из примеров:

    Основная библиотека в HEAD:

    --Какое-то содержимое-- //

    Похожие статьи