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

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

Ищете бесплатные в использовании редакторы "обогащённого" текста? Если да, то вам повезло попасть на нужную страницу. В данном обзоре мы предлагаем вам 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-вёрсткой, чтобы им пользоваться. Если вы умеете пользоваться текстовым процессором или электронной почтой, то справитесь и с ним.

Я искала визуальный редактор, приятный глазу, чтобы не пришлось переделывать дизайн и лишний раз тратить время. В процессе, я нашла и испытала несколько визуальных редакторов.Монтаж визуальных редакторов на сайт представляет простую систему действий. Нужно поставить в тег 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:

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

Очень часто в процессе редактирования контента сайта необходимо (а также очень удобно) видеть готовый результат на странице браузера. Используя свойство тегов 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 наиболее используемых 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. Целью плагина является простота и легкость в использовании. Он включает в себя все требуемые функции. Вы можете настраивать внешний вид, функции, и языки.