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

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

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

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

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

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

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

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

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

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

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

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