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