Визуальный редактор jquery. Как сделать визуальный редактор на JavaScript. Простой jquery скрипт для редактирования HTML5 текста и его сохранения с помощью ajax
Наверняка, Вы много раз сталкивались с визуальными редакторами , позволяющими достаточно удобно формировать внешний вид страниц, либо каких-то сообщений, например, на форуме. Причём не с 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 , в котором не будет ничего лишнего, а только то, что нужно Вам.
Дать пользователям возможность форматирования текста без изучения дополнительного кода – это то, над чем разработчики усердно стараются последние несколько лет. И все не напрасно, они уже добились значительно прогресса. Представляем вам 10 наиболее используемых WYSIWYG-редакторов . Надеемся, что вы подберете что-то для собственных проектов.
01. NicEdit
NicEdit представляет собой отличную альтернативу большим и громоздким редакторам. Он включает в себя все требуемые функции, но остается очень простым в интеграции в сайт.
02. TinyMCE
TinyMCE представляет собой бесплатный javascript HTML WYSIWYG-редактор. Его легко внедрить в сайт, и он предоставляет широкий ряд возможностей по настройке и изменению внешнего вида. TinyMCE, наверное, самый «завершенный» редактор в нашей сегодняшней подборке. Почти MSWord.
03. CKEditor
CKeditor – это новый FCKEditor, который раннее завоевал звание лидера на рынке. Редактор разработан на его основе, и нацелен на то, чтобы исправить, с чем возникали проблемы в FCKEditor. В результате мы получаем высокопродуктивный WYSIWYG-редактор, который предлагает все функции, которыми вы обычно пользуетесь в MSWord или Open Office.
04. YUI Rich Text Editor
YUI Rich Text Editor – это графический интерфейс пользователей от Yahoo, который превращает обычное поле ввода текста в полноценный WYSIWYG-редактор. Приложение предоставляется в различных версиях, с различными свойствами и наполнением. Но используя любую из версий, вы получите все необходимые для редактора функции.
Markitup – это плагин для jQuery, который позволяет вам превратить обычное поле ввода текста в редактор тэгов и форматирования. Html, Wiki и BBcode – это всего лишь немногое из того, что предлагает плагин. Markitup – это не WYSIWYG-редактор, но это не делает его хуже, так как он предлагает вам весь требуемый функционал.
06. FreeTextBox
FreeTextBox представляет собой HTML-редактор, предназначенный специально для ASP.NET. Внешний вид редактора очень напоминает Microsoft Word. В бесплатной версии действительно не так много функций, но есть все требуемые.
07. MooEditable
WYSIWYG-редакторы, в большинстве своем, сейчас представляют плагины для популярной библиотеки jQuery, и в меньших случаях – Mootools. MooEditable вполне заполняет этот разрыв, представляя собой простую, но очень эффективную javascript-библиотеку. Если вы фанат Mootools, то у вас не возникнет с ней проблем.
08. OpenWysiwyg?
OpenWysiwyg – это кросс-браузерный полноценный редактор со всеми требуемыми функциями. Он даже включает в себя привлекательные выпадающие меню и кнопки. К сожалению, Chrome не будет поддерживать его.
09. Spaw Editor - сайт умер
Spaw Editor – это редактор WYSIWYG, который позволяет разработчикам веб-сайтов заменить стандартные текстовые поля на управляемый HTML-редактор, с широким рядом настроек, на многих языках и с возможностью менять внешний вид.
10. jHtmlArea
jHtmlArea – это еще один текстовый WYSIWYG-редактор, который представляет собой плагин для Jquery. Целью плагина является простота и легкость в использовании. Он включает в себя все требуемые функции. Вы можете настраивать внешний вид, функции, и языки.
Есть tinyMCE - монстрообразные, не гибкие, их сложно изменять под задачи сайтов и интерфейсов. Есть небольшие, простые, они часто с ужасным дизайном, не развиваются, не поддерживаются. Как настоящий разработчик, несколько лет назад я решил написать свой редактор и в течение этого времени постоянно развивал его и упрощал. Суть редактора постепенно свелась к простым требованиям:
- он должен быть красивым и одновременно ненавязчивым, чтобы вписывался без внешних изменений почти в любой интерфейс;
- обязательно быстрым и легкий, потому что никому не нравится сидеть даже полминуты в ожидании загрузки всех кнопок и плагинов;
- гибкий для разработки, доработки и встраивания под все возможные нужды;
- с простым и понятным интерфейсом. В идеале визуальный редактор - это просто поле для ввода текстов, без лишних кнопок и функций. Просто люди пишут тексты в вебе и это все что им нужно.
На сайте редактор можно потрогать, попробовать в действии, скачать бесплатно и свободно встраивать в свои собственных проекты.
Редактор написан на jQuery, но в необычном стиле, не так как плагины для этой библотеки, это оправдано, по двум причинам:
Потому что хочется совершенствовать, хочется свести ошибки к нулю, чтобы их просто не было. Хочется чтобы на всех сайтах был хороший редактор и не нужно было бы мучаться с кучей различных решений.
Почему нет кнопки «очистить от мусора Ворда»?
Это задача на стороне сервера, так как этой кнопкой никто не пользуется, обычные пользователи и даже редакторы, журналисты не понимают зачем она нужна. Если есть возможность решить проблему за счет автоматических и программных методов - ее нужно решить этими методами, не перекладывая на пользователя.
Почему нет той или иной кнопки и расширений редактора?
В этом одна из целей - убрать все лишнее. Каждый раз при желании придумать расширение надо бить себя по рукам.
Будет ли развиваться и дополняться документация?
Обязательно, в том числе на основе отзывов и вопросов.
Поддерживается ли IE6?
Нет и не будет.
Что планируется сделать в следующей версии?
- Локализация (английский и русский в одном пакете);
- Переработать и сделать удобным вставку и управление таблицами.
Очень часто в процессе редактирования контента сайта необходимо (а также очень удобно) видеть готовый результат на странице браузера. Используя свойство тегов 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-е, которому мы так привыкли.
Ищете бесплатные в использовании редакторы "обогащённого" текста? Если да, то вам повезло попасть на нужную страницу. В данном обзоре мы предлагаем вам 10 отличных бесплатных Rich-Text редакторов. Редакторы "обогащённого" текста позволяют вам править и набирать текст из веб-браузера. Задействуются они по-разному, обеспечивая пользователю возможность размещать сгенерированный и отформатированный им контент.
Надеемся, наш список предложит вам действительно наилучшие решения. Не стесняйтесь делиться им с друзьями, а с нами вашими мнениями о данной подборке. Перед вами полный список.
Приятного просмотра!
CKEditor - бесплатный текстовый HTML-редактор с открытым исходным кодом, предназначенный для облегчения вам задачи наполнения веб-сайта контентом. WYSIWYG-редактор, открывающий вам доступ к привычным функциям текстового процессора прямо с веб-страниц. Сделайте работу над вашим веб-сайтом удобнее с помощью этого редактора, обслуживаемого целым сообществом.
markItUp! задуман не как редактор-"всегда-готов-и-на-все-руки". Это, напротив, очень компактный, гибкий в настройке и в работе сервис, способный послужить разработчику при отладке его CMS, блогов, форумов или веб-сайтов. markItUp! - не WYSIWYG-редактор и никогда таковым не станет.
NicEdit - компактный, межплатформенный, встраиваемый редактор контента для варьирования наполнения веб-сайта легко и просто прямо в браузере.
TinyMCE - внеплатформенный javascript/HTML-пульт WYSIWYG-редактирования, выпущенный как ресурс сетевого базирования с открытым исходным кодом и защищённый лицензией LGPL. TinyMCE умеет преобразовывать поля HTML TEXTAREA и другие HTML-элементы в единицы редактирования.
Бесплатный межплатформенный WYSIWYG-редактор , укомплектованный всеми функциями редактирования "обогащённого" текста, которые нужны вам для заметного улучшения вашей системы управления контентом.
jQuery TE это jQuery-модуль.
Компактный (19.5 Кб) и очень удобный HTML-редактор. Работает по WYSIWYG-схеме.
А главное, он может внедряться в вашу систему всего за 1 минуту. И интерфейс его можно модифицировать как угодно. Даже CSS-классы можно заменять.
Ищете Rich-Text редактор текста для jQuery-ресурсов без всяких излишеств? Вы обратились по адресу!
Простой, компактный, расширяемый HTML-редактор на базе jQuery, работающий по WYSIWYG-принципу. Средство лёгкого отображения WYSIWYG-HTML-редактора на месте любого элемента TextArea DOM в пределах страницы. Облегчённый скрипт "весит" 9.17 Кб; CSS с картинками вместе "тянут" на 25.9 Кб.
uEditor гибок и прост в применении. Выдаёт на-гора отчётливый пригодный к работе код (правда, требующий заверения в установленном порядке), помимо прочего, для работы в WYSIWYG-режиме можно задействовать собственную таблицу стилей. Функциональность сервиса можно ещё более повысить, благодаря простой в обращении системе дополнительных модулей.
С Whizzywig всё просто. Позволяет вам в веб-окне компоновать "обогащённый" отформатированный текст. Пишет он, вообще-то, на XHTML, но вам не нужно владеть HTML-вёрсткой, чтобы им пользоваться. Если вы умеете пользоваться текстовым процессором или электронной почтой, то справитесь и с ним.
