Программист-математик
0,0
рейтинг
3 октября 2011 в 15:30

Разработка → Краткий список WYSIWYG редакторов


Однажды мне потребовался WYSIWYG редактор, я помнил как он выглядит, его функции, но не помнил названия. Через 45 минут я все же его нашел… Тогда я поставил перед собой задачу помочь многим, в том числе и себе: сделать сводный список всех чуть более известных WYSIWYG редакторов.

Вступление


Данный топик представляет собой обширный список визуальных редакторов, почти или частично пригодных для использования. Цель, которой я руководствовался, заключался в том, чтобы систематизировать существующие данные, разбросанные по интернету.

TinyMCE



Один из самых распространенных визуальных редакторов, обладает недюжинным функционалом. Есть множество дополнений, по умолчанию установлено множество плагинов.
(Браузеры: Mozilla 1.3+, MSIE 5.5+, Opera 9.0+, Safari, Chrome)
[Официальный сайт | Демо]

CKeditor



Полный аналог TinyMCE.
(Браузеры: Firefox 1.5+, Opera 9.50+, Safari 3.0+, Camino 1.0+, Internet Explorer 5.5+, Google Chrome)
[Официальный сайт]

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



Очень средний визуальный редактор. Обладает стандартным функционалом.
(Браузеры: Firefox 1.5+, Opera 9+, Safari 3.0+, Internet Explorer 5.5+, Google Chrome)
[Официальный сайт | Демо]

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+)
[Официальный сайт | Демо]

html-5-wysiwyg



Визуальный редактор на HTML5 со всеми вытекающими из этого последствиями. По большей части, редактор является демонстрацией возможностей HTML-5, нежели готовым продуктом.
(Как следует из названия, требуется поддержка HTML5)
[Страничка на code.google.com]

jWysiwyg



Леговесный плагин для jquery.
[Официальный сайт | Демо]

Реформатор



Визуальный редактор от студии Артемия Лебедева.
[Официальный сайт | Демо]

Итог


Надеюсь топик окажется вам полезным. Если вы нашли, что какой-либо визуальный редактор отсутствует, всенепременно напишите мне об этом, я буду вам очень благодарен.

UPD 0: поправил название
UPD 1: дополнил описание YUI Rich Text Editor (спасибо sdevalex).
UPD 2: добавил jWysiwyg (спасибо mr47).
UPD 3: добавил Реформатор (спасибо kuber).
UPD 3: добавил Реформатор (спасибо kuber).
UPD 4: исправлено: Imperavi стал платным

P.S: 1. если какой не назвал, пишите, исправлю. 2. Если топик не актуален, напишите, уберу.
Марк @bos4r
карма
26,0
рейтинг 0,0
Программист-математик
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Спецпроект

Самое читаемое Разработка

Комментарии (89)

  • +48
    Обзора то как такого нет, только список редакторов
    • +12
      У таких топиков есть право на жизнь — потом к нему ещё вернётся некоторое количество людей из тех, кто добавляет в избранное. Чтобы не гуглить то, что за нас погуглил автор. А пробовать всё равно лучше самому.
  • +2
    Ещё такой же обзорчик с упором на bbcode функционал…
    • +1
      Партия сказала: надо! Комсомол ответил: есть будет!
      • –1
        Заранее спасибо :)
      • –1
        Ждем :)
        • 0
          Спасибо!
      • +1
        Комсомол так ничего и не сделал и развалился?
        • 0
          Спасибо за то, что напомнили. После сессии обязательно сделаю полноценный обзор.
          • 0
            Сессия-то скоро кончится? =) Комсомол затянул?
    • 0
      Хотя… Есть Markitup, в нем есть модуль, позволяющий вставлять bbcode.
      • 0
        Нужен именно wysiwyg. С редактируемыми тегами. Вообще хотеось бы увидеть в одном месте все редакторы bbcode (wysiwyg) собранные в одном месте
      • 0
        В CLE также можно допилить BBcode плагином.
  • +4
    топик актуальный, но как выше заметили, нужен обзор — таблица с характеристиками, плюсы/минусы, какой редактор где лучше использовать и т.п.
  • 0
    Yahoo самый лучший в плане продуманности API и по этому я бы не назвал его «минимальным». Думаю вы его обидели.
  • +2
    А мы как-то изучив все основные WYSIWYG пришли к выводу что лучше сделать что-то свое. Процентов так 90% возможностей, представленных в этих редакторах, нужны, пожалуй, только для CMS а-ля WordPress. А простых пользователей лучше ограничивать все-таки в творческих порывах при редактировании текста.
    • 0
      nicEdit просто до безобразия, и имеет возможность полной настройки и выбора кнопок на панели. Зачем надо было реализовывать то же самое ручками?
      • 0
        В 2008 ничего легковесного найти, собственно, не удалось. А nicEdit да, вполне легкий. Правда тогда мы о нем, увы, и не слышали.
        • 0
          Зачем писать про то, что было так давно? Я в 2008м тоже сменил fckeditor на TinyMCE, потому что ничего другого не было. А смысл топика как раз в том, что щас 2011 кончается и что вариантов стало больше. Писать свой велосипед теперь очень тупо, ведь варианты — достойные!
    • +1
      лучше ограничивать все-таки в творческих порывах при редактировании текста

      и не забывать при этом фильтровать введённые данные на стороне сервера
  • +6
    Спасибо за подборку.

    Простое перечисление редакторов — это не так уж круто.

    Было бы здорово иметь хотя бы сравнительную таблицу возможностей редакторов, а также перечисление недостатков каждого, но для этого нужен опыт с каждым из них.
  • 0
    Соглашусь с предыдущими ораторами.
  • +1
    Да, меня лично интересует возможность добавления своих тегов и для них — своих кнопочек.
  • +1
    Мда, вот и прошло то время, когда со словами «WYSIWYG-редакторы» в первую очередь ассоциировались MS FrontPage и Allaire HomeSite. А сейчас в постах даже не упоминается, что речь идёт про «внутриHTMLные редакторы», потому что это подразумевается по умолчанию…
    • 0
      А я прочитав название топика задумался о каких редакторах идет речь. Правда только на секунду.
  • +2
    Отличный леговесный плагин для jquery akzhan.github.com/jwysiwyg/
  • +1
    Формат описания унифицируйте, пожалуйста — так будет легче сравнивать продукты. Например, о поддержке в одном месте написано «Chrome 10+», в другом «Chrome», в третьем месте о поддержке браузеров вообще ни слова.

    Также можно в начале описать базовый функционал, которым обладают большинство редакторов, а потом под каждым описать что есть дополнительно и чего, может быть, нет из базового комплекта по-умолчанию.

    В любом случае, спасибо за труд.
  • +2
    Как разработчик elrte, я склонен считать, что минус aloha — это большой плюс для его разработчиков :) И я вот тоже подумываю…
    • 0
      И правильно делаете! Все-таки, в большинстве случаев редакторы используются там, где есть возможность убедить пользователя обновить браузер. А тянуть кучу лишних костылей ради поддержки ИЕ6 и иже с ним — да ну их, ей-богу!

      К сожалению, главный минус Aloha не в этом (он не указан в статье): дело в том, что эта дрянь включает в себя полностью код jQuery (и еще какого-то js-фреймворка, запамятовал). И при всех его плюсах, рука не подымается на одной странице два раза загружать и исполнять jQuery. А вообще жаль: он очень не плох.

      P.S. ваш редактор крут! ;)
  • 0
    В Google Closure Library есть Editor
    Demo
  • 0
    Можно нубский вопрос? Существуют ли визуальные редакторы, в которых можно нарисовать таблицу как это делается в ворде? То есть карандашиком «вычертить», а не указывать количество столбцов и ячеек.
    • 0
      TinyMce к примеру. Там сначала задаешь кол-во колонок и ячеек, а потом, как в ворде — можно дорисовывать, можно стирать лишнее.
  • +6
    Я думал, что узнаю что-то новое… Банальный тест:
    1. Печатаем текст в редакторе — два абзаца
    2. Выделяем текст в редакторе — от середины первого абзаца и до середины второго (ни один абзац полностью не выделен)
    3. Жмем (например) кнопку «Ж»
    4. Смотрим в HTML

    Очень многие из перечисленных редакторов ведут себя, мягко говоря, «интересно» даже в таком банальном тесте (кстати, разные браузеры гарантируют разное поведение). Например, nicEdit. Отвратный редактор.

    Spaw — обычный редактор? Да вы в исходный код будьте добры залезть!

    CKEditor — это то же самое, что и TinyMCE? Вы шутите? Попробуйте для последнего мало-мальски тему написать, увидите, о чем я. Я не говорю уже про то, что CK адаптирован под написание сторонних файлбраузеров и имеет свой, правда, платный (но где наша не пропадала, верно?).

    Короче говоря, обзор — одно название. Двойку!
    • 0
      На самом деле, выбор редактора — это в наши дни дело довольно тонкое. С визуальными редакторами работают как понимающие в HTML люди, так и совершенные профаны. И здесь возникает куча нюансов. Никто никогда не задавался вопросом, почему размеры jwysiwyg (плагина для jquery) и, скажем, tinymce так сильно разнятся? А я вам скажу — как раз из-за того, что внутри этого самого редактора присутствует куча логических конструкций, предотвращающих даже умышленную ломку структуры будущего DOM-дерева. Плюс — эти логические конструкции для некоторых браузеров исполнены по-разному.

      Лично я для себя избрал CKEditor. И всем советую. Правда, любители оперы не одобрят повсеместное использование этим редактором контекстных меню (которые, кстати, сильно экономят место от ненужных кнопок), но всегда ведь можно включить в настройках обработку яваскриптом ПКМ-событий.
      • 0
        И тем не мене после tinymce DOM полное говно. И после google docs — полный ахтунг (чего только стоят перекрытия и коверканья стилей текста).
        Я вообще склонен считать, что при текущей стандартизации HTML и браузеров в принципе невозможен невозможен WYSIWYG редактор хоть сколько ни будь сравнимый с десктопным.

        Скорее всего следующее поколение будет canvas-е, с полным контролем каждого пикселя и архитектурно схожим с десктопными WYSIWYG редакторами, с полной отвязкой от DOM и экспортом в него только on demand. Текущие нагромождения полудокументированных html хаков не уже имеют шансов стабилизироваться и улучшить качество выдаваемого DOM.
  • +1
    Довольно давно пользуюсь легковесным Whizzywig… вполне устраивает и даже больше чем нужно :)
  • 0
    aloha прекрасно работает в opera 12 с маскировкой под ff
  • +1
    Почему браузеры на webkit до сих пор не поддерживают ресайзинг картинок в таких редакторах? Все перебрал. Говорят, что разработчики webkit нехотят добавлять такой функционал, но ведь могли же разработчики редакторов как-нить обойти ограничения чистым js.
  • –1
    CKeditor
    Полный аналог TinyMCE.


    Если я не ошибаюсь, то CKEditor произошел от FCKEditor'а, а он появился ранее TinyMCE.
  • 0
    Не люблю, когда нажатие Enter вставляет тэг
    , а не бьёт на -абзацы. Для меня это чуть ли не главный критерий отбора.
    • 0
      В ТУДУшку: научиться жать «Предпросмотр» перед сабмитом…
      Повторю.
      Не люблю, когда нажатие Enter вставляет тэг <br />, а не бьёт на <p>-абзацы. Для меня это чуть ли не главный критерий отбора.
      • 0
        В некоторых редакторах это поведение настраивается. В CKEditor'e точно знаю, что можно настроить поведение при нажажатии на enter, обрамлять ли абзацы тегом «p» или другим своим и прочее подобное.
      • +1
        Пробовали wymeditor?
        Хоть и функционал у него не большой, но можно быстро его подогнать под свои нужды: кнопки дополнительные, загрузчик картинок. Вот он, даже визуально, разбивает на <p>. Демо
  • НЛО прилетело и опубликовало эту надпись здесь
    • +1
      Да, CKEditor очень гибок и удобен в плане настройки под свои цели. Нужно потратить немного времени на изучение документации, зато потом все быстро делается.

      Только я в качестве модуля подгрузки вложений использовал KCFinder — очень удобно и функционально. На хабре как-то его даже обсуждали уже.
      • 0
        Кстати, на странице с демо, в примере автономного использования, сделан общий доступ на загрузку. Народ там периодически развлекается между собой (:… да простят меня разработчики…
      • 0
        В KCFinder можно как-то прикрутить какой-то коннектор для вытягивания описаний к файлам? Чтобы не просто имена файлов светить.
      • НЛО прилетело и опубликовало эту надпись здесь
  • 0
    Появился маленький вопрос.
    Есть ли такие редакторы, с возможностью добавлять свои элементы туда? допустим на форуме есть ббкоды. И даже есть ббкоды уникальные для текущего форума. Есть ли редакторы позволяющие реализовывать свой функционал? желательно под jQuery и без видимых багов
    • 0
      Есть
  • +1
    Я на разрабатываемых сайтах использую Tinymce с переключалкой на quicktags (редактор тегов), т.е. в точности как в Wordpress. Мне кажется это решение самым оптимальным если стоит задача редактирования контента.
  • 0
    Леговесный плагин для jquery. — прикольная опечатка про лего (:
  • 0
    Слишком поверхностное описание, даже местами вводящее в заблуждение (например, получается, что Mercury editor может вставлять и редактировать таблицы и имеет предпросмотр, а другие редакторы — нет).

    Еще, как минимум, нужно было бы описать возможность/невозможность загрузки файлов на сервер через редактор или наличие такого расширения, т.к. это очень важно при выборе редактора. Особенно если это редактор для внутренней системы управления контентом, а не просто поле в форме добавления комментария.
  • +1
    elRTE неожиданно порадовал. До этого использовал только CKeditor, но в elRTE есть то, что очень не хватало
  • 0
    Пища для размышления:
    antiflasher.livejournal.com/3598.html
  • 0
    А почему не упомянут JCE Editor? http://www.joomlacontenteditor.net/
    • 0
      А разве это не расширение от тини?
      • 0
        Да, использует его движок, но имеет свои особенности, которые делают его более удобным чем Тини. По этому я посчитал, что его нужно было упомянуть.
  • +1
    TinyMCE — очень тяжелый. Иногда он просто излишний, а люди берут его только потому, что он распиарен. Хотя для многиз задач всего функционала не нужно. Да, можно отключить, но все равно будет загружаться все его ядро.

    Alloha — на момент поиск редактора для наших проектов он не поддерживал align команды.

    jwysiwyg — приличный редактор. Хотя немного не опрятный. Например, ресайзинг с помощью jqueryUI плагина лагает и вообще «тяжелый».

    Imperavi — Вы его исходники смотрели? Там засран глобал. Дальше я скрипт даже не стал смотреть :)
    • +1
      И еще важная вещь про алоху. Он тянет с собой ExtJs Core, а также jquery. 8\
    • 0
      Imperavi — похоже больше не поддерживается разработчиками, все жду когда его допилят до нормального состояния
  • 0
    wysiwygPro — очень мощный редактор, как по мне 1 из лучших
  • 0
    Чуток добавлю еще InnovaStudio WYSIWYG Editor, покупал в давние времена.
    Поддерживается малазийцами.

    www.innovastudio.com/editor.aspx
    • 0
      На 5 минут опередил :) Хороший редактор, сам сто лет его использую уже.
  • 0
    А я наверное никогда не перейду с TinyMCE. Слишком много функционала на нем заточено: кастомные кнопки, менюшки, внешний вид… :(
  • 0
    Нужно еще написать обзор плагинизации редакторов, т.е. как легко создать и встроить свой модуль в редактор. Из приведенных редакторов делал модули для TinyMCE, FCKEditor и InnovaStudio WYSIWYG Editor. Последний переписал весь под себя. Боше всего понравилось писать под TinyMCE, написал удаленный XML файловой редактор, используется тут.
  • 0
    Недавно столкнулась с такой проблемой: использовала elrte и fceditor в админке, но заказчики сайтов (в сущности, обычные пользователи) не могли добавлять фотографии в текст. Слишком сложный для них механизм.

    Теперь использую imperavi (правда, в самой последней версии они слишком урезали функционал). Чуть дописала, и в принципе, пока устраивает… но багов там все-таки достаточно.

    Может, кто-то подскажет какой-нибудь wysiwyg редактор с возможностью простого добавления картинок через кнопочку обзор (беглый взгляд на список представленных редакторов ничего нового не принес, везде предлагают ввести url).
    • 0
      TinyMCE + плугин tinybrowser
    • 0
      JCE тоже позволяет
  • 0
    Какие из перечисленных редакторов смогут переводить визуальную таблицу в BBcode и наоборот?
    В CLEditor для этого пришлось дописывать BBCode плагин, вроде работает. Всем CLE хорош, но не смог написать авторесайз текстбокса по содержимому. Хочу попробовать другой редактор, с готовым функционалом и кастомными BBCodes.
    • 0
      Ниже написал про xhEditor — так вот у него есть UBB, прямо в архиве демка лежит.
  • 0
    Насчет MarkItUp — я не согласен, что это только лишь удобный редактор HTML. Он поддерживает большинство современных разметок кода: reStructuredText, Markdown, Textile, Wiki-syntax, BBcode и др.

    Единственное, чего в нём нет — это visual RTE, привычного нам по всем остальным редакторам. Но имхо — в сегодняшней реализации возможностей RTE браузерами — лучше эти возможности и не использовать (слишком много мусора накапливается в коде, особенно при вставке из Word, думаю вы меня понимаете).

    Мой персональный выбор — MarkItUp (можно смело вставлять в блоги для программеров)
  • НЛО прилетело и опубликовало эту надпись здесь
  • 0
    xhEditor забыли:
    xheditor.com/

    По-моему, отличная штука. Хоть примеры и сайт только на китайском, но для него самого английская версия есть, а русскую несложно состряпать, пройдясь по исходникам.
    • 0
      Клад! Ушел учить китайский разбираться с демками.
  • 0
    Ну прежде всего, насколько я понимаю, редактор должен быть доступен в максимальном числе браузеров.
    Если он работает только в самых продвинутых — кому это нужно? По идее, даже ИЕ6 должен поддерживаться (да знаю, знаю куда его засунуть нужно...).
    Во вторых, редактор не должен использовать реальных кнопок… У меня тут одна симпатичная тема убила напрочь желание смотреть на Whizzywig например…
    image
    Ну да, понятно, куда такую тему засунуть…
    Мне видится тут наименее сырым TinyMCE. Но я обязательно проверю остальные.
    А за обзор (точнее перечисление) спасибо. Пойдет в избранное.
  • 0
    nicedit хорош, спасибо.
  • +1
    Очень средний визуальный редактор
    Это как?
    • 0
      Ни рыба ни мясо, стандартным функционалом обладает, а это значит, что его следует включить в список. Или другими словами с первой минуты не смог сказать, хорош он или нет.

      Если у вас есть опыт работы с Spaw, то я буду рад дополнить статью с указанием авторства дополнившего.
      • 0
        Сама формулировка «очень средний» неграмотна. Бывает очень хороший или очень плохой. Не бывает очень среднего.
  • 0
    А в каком редакторе есть встроенный кат, не подскажете?
    Я как-то написал своё расширение для FCKEditor или TinyMCE (не помню точно).
    Но «нативным» было бы пользоваться приятнее.
    • 0
      В tinyMce можно настроить тэг-кнопочку-pagebreak
      • 0
        Ну да, я на основе неё и запилил кат в своё время :)
  • 0
    автор, спасибо тебе:)
  • 0
    CKeditor загрузка фалов с компа, вдруг кому понадобится youon.ru/Web/%D0%94%D0%BB%D1%8F-%D1%81%D0%B0%D0%B9%D1%82%D0%B0/zagruzka-kartinok-na-server-v-ckeditor
  • 0
    Забыли про Dijit.Editor livedocs.dojotoolkit.org/dijit/Editor :)
  • 0
    Вот ещё чего нашел easywyg.com
  • 0
    Это все на javascript. А на С++ что нибудь есть?
  • 0
    Автор проверь ссылки, половина — не рабочие:
    elRTE, Spaw, Aloha Editor (демо), YUI Rich Text Editor, html-5-wysiwyg (PROJECT MOVED TO GITHUB), jWysiwyg.

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.