Как известно, встроенное редактирование, или другими словами, возможность редактирования контента непосредственно на странице, - это очень полезная вещь, которая всегда должна быть у вас под рукой. Я расскажу, как всё это работает, а также покажу, как с помощью 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);
}
});
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:
--Какое-то содержимое-- //
Есть tinyMCE - монстрообразные, не гибкие, их сложно изменять под задачи сайтов и интерфейсов. Есть небольшие, простые, они часто с ужасным дизайном, не развиваются, не поддерживаются. Как настоящий разработчик, несколько лет назад я решил написать свой редактор и в течение этого времени постоянно развивал его и упрощал. Суть редактора постепенно свелась к простым требованиям:
- он должен быть красивым и одновременно ненавязчивым, чтобы вписывался без внешних изменений почти в любой интерфейс;
- обязательно быстрым и легкий, потому что никому не нравится сидеть даже полминуты в ожидании загрузки всех кнопок и плагинов;
- гибкий для разработки, доработки и встраивания под все возможные нужды;
- с простым и понятным интерфейсом. В идеале визуальный редактор - это просто поле для ввода текстов, без лишних кнопок и функций. Просто люди пишут тексты в вебе и это все что им нужно.
На сайте редактор можно потрогать, попробовать в действии, скачать бесплатно и свободно встраивать в свои собственных проекты.
Редактор написан на jQuery, но в необычном стиле, не так как плагины для этой библотеки, это оправдано, по двум причинам:
Потому что хочется совершенствовать, хочется свести ошибки к нулю, чтобы их просто не было. Хочется чтобы на всех сайтах был хороший редактор и не нужно было бы мучаться с кучей различных решений.
Почему нет кнопки «очистить от мусора Ворда»?
Это задача на стороне сервера, так как этой кнопкой никто не пользуется, обычные пользователи и даже редакторы, журналисты не понимают зачем она нужна. Если есть возможность решить проблему за счет автоматических и программных методов - ее нужно решить этими методами, не перекладывая на пользователя.
Почему нет той или иной кнопки и расширений редактора?
В этом одна из целей - убрать все лишнее. Каждый раз при желании придумать расширение надо бить себя по рукам.
Будет ли развиваться и дополняться документация?
Обязательно, в том числе на основе отзывов и вопросов.
Поддерживается ли IE6?
Нет и не будет.
Что планируется сделать в следующей версии?
- Локализация (английский и русский в одном пакете);
- Переработать и сделать удобным вставку и управление таблицами.
Ищете бесплатные в использовании редакторы "обогащённого" текста? Если да, то вам повезло попасть на нужную страницу. В данном обзоре мы предлагаем вам 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-вёрсткой, чтобы им пользоваться. Если вы умеете пользоваться текстовым процессором или электронной почтой, то справитесь и с ним.