Imperavi: удобный и действительно красивый JS WYSIWYG редактор

    В продолжение темы о красивой и удобной JS визуализации (http://habrahabr.ru/blogs/javascript/124899/) хочу рассказать вам о WYSIWYG редакторе, на который сегодня случайно наткнулся.

    Вы наверное часто используете различные WYSIWYG редакторы в ваших проектах. Я их тоже часто использую, так уж получается, что они очень нравятся секретаршам и т.д. нашим пользователям.

    Таких редакторов существуют десятки, но все они мне почему-то не нравилисись: то выглядит уж очень топорно, то работает совершенно криво. В конце концов я остановился на TinyMCE. Он хоть и ужасен на вид, но рабоет стабильно.

    И вот сегодня я совершенно случано наткнулся на редактор, который мне полностью подходит:
    • работает стабильно
    • выглядит очень стильно
    • написан на jQuery

    Имя этому чуду – Imperavi.
    Попробуйте сами и думаю, что вам понравится.

    Скриншот:
    image

    UPD
    Более новая версия редактора: http://imperavi.ru/redactor/.
    Поделиться публикацией

    Комментарии 116

      +2
      Потестируем. Пока мой выбор пал на elRTE.
        +1
        Я бы их не сравнивал. Разные тулзы, разного масштаба и для разных задач.
          0
          Согласен. Я сравнивал скорее с TinyMCE, которую упомянул автор топика.
            0
            А, ну так то да, с TinyMCE вполне можно.
          –2
          Мое имхо в проектах надо отходить от таких редакторов, своими возможностями они часто код засоряют. А по логике вы не должны делат ьв проекте отсебятины а размечать текст только с помощью html: p h2 h3 h4 h5 strong i uo ol а уже стили к ним браться должны с сайта дабы сохранить единобразие
            0
            объясните это рядовым пользователям, которым проще уйти на сайт с редактором, чем учить html или markdown.
              –7
              если человек не можут осилить markdown, то этот человек не достоин существовать.
          +49
          Очень подробное, интересное описание, со сравнением функциональных и визуальных особенностей, развернутым описанием интеграции и настройки.
          Как раз для хабра.
            –18
            Вы хотите поговорить об этом?
              +6
              Меня это не беспокоит, меня это расстраивает.
              Это пост-ссылка; только почему-то в полкило букв и без удобной ссылки с топика, как должно быть.
            0
            Да, прикольный, но как у него с раширяемостью и API?

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

            Документации вообще нету…

            Не, остаюсь на TinyMCE. :)
              +1
              Локализация есть, так как написали его наши соотечественники.
                0
                Присоединяюсь к вопросу о расширяемости
                  0
                  Система плагинов есть. Код не очень сложный.
                    0
                    делал для него некоторые изменения, и плагин писал. в принципе норм, не хуже, чем у других
                    0
                    Если быть точнее на TinyMCE вы оставляете своих юзеров.
                    Не агитирую за Imperavi, но код у них очень чистый и логичный. Разобраться как прикрутить какие-то дополнения или изменить функционал несложно.
                    0
                    В общем интересное решение, да вот функционал маловат. Вставить\удалить картинку можно, а вот изменить ее нельзя (указать другой url картинки).
                    + в опере изменение ориентации текста не отражается. Тэги прописываются — а текст как стоял слева, так и стоит.
                      0
                      Вот здесь более свежая версия оказывается лежит. В ней всё рабоает.
                        0
                        В более свежей почему-то не удалось открыть меню редактирования картинки
                          +1
                          Opera 11.50 Mac. Полёт нормальный.
                            0
                            У меня всё работает.
                              0
                              Сейчас открылось, тем не менее, изменить url картинки нельзя.
                                0
                                А аплоад картинок с локального компа удалось заставить работать?
                                  0
                                  Насколько я помню, в демо аплоад отключен. А редактор в своих сайтах пока не использовал.
                                    0
                                    У меня и на своем не получается почему-то. Картинку с url вставляет, а вот загрузка не идет. Вставляется вместо картинки какаой-то странный кусок фразы про главную страницу. Хотя, выглядело все очень просто, в конфиге пути к папкам, кажется, верно прописал. Почему не хочет работать только никак не пойму.
                            0
                            Честно набрал в поиске «imperavi» и только после того как ничего не нашел, написал свою заметку.
                            +1
                            При переключении в HTML-вид все стилевые изменения текста (цвет, фон, стиль шрифта) сбрасываются. FF4.
                              0
                              Да, сам сейчас заметил эту проблему.
                                0
                                В новой версии редактора текст начал заворачиваться в span, но стили все равно сбрасываются…
                                0
                                Отличный редактор. Простой и красивый. Включили его в базовый комплект cogear². Поддерживаем отечественного разработчика.
                                  0
                                  Рановато Вы, глючит пока, подождите еще пару версий.
                                    0
                                    думаю к тому времени успеется
                                  0
                                  Тоже пока им пользуюсь. Редактор удобный, но есть некоторое количество глюков в его работе. Как написали выше, часть стилей при работе с текстом может пропадать.
                                    0
                                    Круто. Просто и круто. Еще бы Auto-Markdown для него сделать :)
                                      +2
                                      Всем интересующимся я бы еще посоветовал взглянуть на Aloha Editor. Если кто не видел, конечно.
                                        0
                                        Интересная задумка, но только на HTML5. Большая часть пользователей рискует не увидеть его.
                                        +1
                                        Давно не испытывал такого удовольствия от работы с WYSIWYG-редактором, особенно порадовали таблицы.
                                          0
                                          Однако нет возможности удобно объединять и раскрашивать ячейки…
                                            0
                                            Нет управляющих элементов у таблиц, при создании таблицы нельзя задать ее длину, в меню «Таблица» при выборе ячейки нет пунктов, связанных с изменением свойств ячейки/строки, (а еще можно было и правокнопочное меню приделать). В общем, неясно, как таблицам придать нужный вид.

                                            Демо-страница, FF5, Ubuntu.
                                            0
                                            Очень понравилось! Автору миллион благодарностей!
                                            Как небольшое пожелание. Раз для работы используется jquery, то было бы очень круто, если бы стандартные кнопки были немного «разукрашены», например вот этим: jqueryui.com/demos/button/
                                              +2
                                              он работает без jQuery UI. Не очень хочется порой догружать 50-200 кб этой библиотеки только чтобы кнопочки подкрасить
                                              0
                                              А как он с текстом скопированным из ворда работает? У нас с этим постоянно проблемы возникают.
                                                0
                                                Ну так попробуйте вставить что-нибудь из Ворда. (У меня просто Ворда нет, поэтому не могу сказать)
                                                  0
                                                  Ворд копируется вместеп с мусором. И спаны с параграфами перекрещиваются. Firefox5
                                                    0
                                                    Иногда при копировании из ворда падает на разборе вставленного.
                                                    Наблюдается на Ie7 + Word 2007
                                                      0
                                                      У меня после вставки в Chrome из Word 2010 перестал открываться HTML-код в редакторе.
                                                      0
                                                      Не хватает контекстного меню при нажатии правой кнопкой. А без него не вижу смысла.
                                                      Все таки TinyMCE получше.
                                                        0
                                                        А можно ли убрать с панели некоторые кнопки? Можно ли управлять содержанием выпадающих меню?
                                                          +1
                                                          Можно. В папке toolbars лежит пара готовых наборов. Сменить набор можно при вызове редактора параметр toolbar:'name_js_script'
                                                            0
                                                            Здорово, спасибо! Надо понимать, что по образу и подобию можно и свой набор сваять?
                                                              0
                                                              да, конечно
                                                          +2
                                                          А есть еще такой, CLEditor — довольно интересный редактор.
                                                            +1
                                                            чем же он интересен, потрудитесь объяснить
                                                              0
                                                              Плюсы:
                                                              — прост как топор
                                                              — весит около 14 кб с тулбаром (если не ошибаюсь)
                                                              — можно писать свои плагины, на сайте есть пример
                                                              — работает на jquery
                                                              — генерит вполне лаконичный html+css
                                                              — на мой вкус — самый приятный на вид
                                                              — чертовски быстрый, несколько копий на странице — что есть что нет — летает

                                                              Минусы:
                                                              — несколько кривой ксс, мне пришлось подлатать тулбар
                                                              — отсутствуют из коробки жизненно-необходимая надстройка «во весь экран»
                                                              — использует iframe
                                                              — функционал все-таки слабоват для серьезного редактора

                                                            0
                                                            Кстати, да.
                                                            Если не нужны супермега-возможности, то для простейшей разметки он очень неплохо подходит.
                                                            Правда, иногда требует напильника. Мне пришлось писать плагин к нему для вставки картинок, загружаемых на сервер. Также, «заставил» его использовать contentEditable во всех браузерах, иначе в ФФ вставленный флэш не отображался в редакторе.
                                                            0
                                                            да, но ведь цвет текста не сохраняется (Хром?), даже если перещелкнуть режим html туда-обратно
                                                              0
                                                              Там в настройках отключено сохранение стилей по-умолчанию
                                                                0
                                                                а есть планы прикрутить туда типограф?
                                                                  0
                                                                  я не разработчик редактора, просто после использовании его в проектах поднатаскался в настройке и правке багов
                                                                    0
                                                                    ясно, извините:)

                                                                    но раз вы поднатаскались, последний вопрос: в tinymce бывают ситуации, когда текст, скопированный из ворда не поддается редактированию или удалению (только через html). здесь тоже такое бывает?
                                                                      0
                                                                      Здесь бывает, что он не вставляется т.к. встроенный парсер не переваривает некоторые теги ворда, правится try-catch'ем в одном месте, после чего всё нормально вставляется и редактируется.

                                                                      Из плюсов так-же могу отметить наличие поддержки «ката» из коробки
                                                              0
                                                              Вот бы кто-нибудь ещё интегрировал бы все эти расчудесные редакторы с Etherpad: etherpad.org.
                                                                0
                                                                Если вам нужен WYSIWYG редактор с минимум функционалом и простотой подключения, рекомендую — nicedit.com/
                                                                  0
                                                                  Форматированный исходник жутко невалидный, судя по дате проект заморожен.
                                                                    0
                                                                    однако, если мне не изменяет память, это единственный WYSIWYG наравне с алохой, который показывает текст в стилях сайта.
                                                                      0
                                                                      Imperavi позволяет подключать собственные стили для окна редактирования — текст будет отображаться в стиле сайта. Использую его в нескольких своих проектах, после правки некоторых клюков.
                                                                        0
                                                                        иногда нужно, чтобы без всяких лишних стилей работало. к примеру, когда используется javascript-шаблонизация.
                                                                    0
                                                                    проблема в том, что он уже давно не развивается
                                                                    0
                                                                    Весит меньше CKeditor что очень радует. Да и код плагинов не запутанным выглядит.
                                                                    Хабр есть у кого-нибудь опыт в написании расширений под этот редактор?
                                                                      0
                                                                      выше отписал, что есть
                                                                      0
                                                                      Пробовал я использовать этот редактор, только вот плачевно у него со вставкой изображений в текст, даже на сайте разработчика не работает, у меня так же не завелся(именно вставка изображения, остальное работает на ура).

                                                                      p.s. пытался интегрировать его в django проект.
                                                                        0
                                                                        Как вариант: markitup.jaysalvat.com/home/
                                                                        Уже есть готовое приложение: bitbucket.org/carljm/django-markitup/overview,
                                                                        правда оно обычно отстает на пару версий.
                                                                          0
                                                                          Может быть я туплю страшно но Markitup у меня только в режиме исходного кода работает, визуального как я понимаю там нет?
                                                                            +2
                                                                            В окне редактирования нет, но можно настроить autopreview в отдельном окне, либо использовать preview в ручном режиме (мне например так удобнее).
                                                                              0
                                                                              Понятно. Спасибо. Правда для секретарш это не подходит -(
                                                                          0
                                                                          Нашел приложение для django: django-redactor, в актуальном состоянии держит пакет.
                                                                          0
                                                                          также у данного редактора есть ещё пара багов, связанных с 1) отбражением нескольких редакторов на одной странице 2) подгрузке редактора на display: none поле в ферфоксе
                                                                            0
                                                                            Это просто лечится :)
                                                                            0
                                                                            Год использую его в своей CMS, предварительно подпилив (биндинги для подключения другого модального диалога, биндинги для обработки оформления результирующего HTML, немного другая модель css-маппинга классов самого редактора).

                                                                            Замечательный редактор, хотя и слегка перегруженный функциями. Процентов 80 тасков с тулбара можно было бы вынести в модули.
                                                                              –2
                                                                              написан на jQuery


                                                                              Клево, тоже хочу научиться писать на библиотеке.
                                                                                –2
                                                                                Хотеть мало, webstorm/vim/etc в руки и вперед, храбрых и отважных слава ждет (:
                                                                                0
                                                                                > В конце концов я остановился на TinyMCE. Он хоть и ужасен на вид, но рабоет стабильно.
                                                                                А как же поддержка скинов и тем?

                                                                                Огромный плюс TinyMCE в том, что он обрабатывает стандартные команды форматирования САМ, а не передает их браузеру. Это гарантирует то, что всегда и везде для bold-а, например, будет использован нужный ВАМ тег (может быть любым), а не тот который браузер считает оптимальным. А у этого как дела с этим?
                                                                                  0
                                                                                  Тут при настройке тулбара можно указать как обрабатывать ту или иную кнопку. Другими словами я могу сказать, что жирный это 'strong', а не 'b'.
                                                                                  0
                                                                                  Кто знает, прикручивается к рельсам?
                                                                                    +1
                                                                                    Это же js, конечно да. Кстати, посмотрите еще на wymeditor, вроде неплохо.
                                                                                      0
                                                                                      Ну я имел в виду хелперы и поддержку FormBuilder чтобы можно было писать нечто типа
                                                                                      form.imperavi_text_area :description

                                                                                      и потом чтобы ajax формы с этим работали.
                                                                                      а еще чтобы
                                                                                      = include_javascript_tag :default

                                                                                      и не приходилось руками таскать JS из проекта в проект.
                                                                                        0
                                                                                        Ну так в свой FromBuilder его же встроить очень просто.
                                                                                        Как раз сегодня буду это делать. Выложу потом апдейт к статье.
                                                                                    0
                                                                                    На одном из последних проектов я тоже решил использовать этот редактор. Правда не совсем понял функцию typo. Из минусов могу сказать, что не очень удобную реализовано добавление файлов, а в остальном сделано на пятерочку.
                                                                                      0
                                                                                      Кстати, да. В ckeditor с SWFUpload все это было хорошо сделано.
                                                                                      0
                                                                                      Для комментирования на сайте этот редактор может подойти, а вот для админки нет, очень мало возможностей.
                                                                                        0
                                                                                        Смторя, что у вас в админке.
                                                                                        Для редактирования новостей – легко.
                                                                                          0
                                                                                          При редактировании новостей мне необходимо зачастую прописывать разные стили для ссылок, прописывать разные отступы для изображений в тексте, разное обтекание, вставлять слои для рекламных блоков,…, наконец, необходим файловый менеджер, так как нет нужды несколько раз грузить одну и ту же картинку,…, нужен предварительный просмотр, нужна редакция текста для верхних и нижних индексов, например, для написания температуры или описания тензорных объектов. Всё, что я перечислил есть в ckeditor+ckfinder. Эта связка подходит для админки.
                                                                                        0
                                                                                        Работает стабильно?..

                                                                                        Попробуйте установить для текста фоновый цвет (или цвет текста), перейти в режим редактирования кода, вернуться в WYSIWYG разметку. Где подевался цвет фона?

                                                                                        Вообщем то что нравиться в существующем редакторе:
                                                                                        — Приятный внешний вид, юзабилити, всплывающие окна
                                                                                        — Написан на jQuery (что скорей всего будет экономить размер js в проекте, где используется jQuery)

                                                                                        Что не нравиться:
                                                                                        — Как было сказано, скудная документация
                                                                                        — Разовое решение для узкого круга задач

                                                                                        Если захотеть, то можно подобную красивую обертку натянуть на тот же TinyMCE. :)
                                                                                          0
                                                                                          Про цвет фона: в настройках выставите remove_styles: false
                                                                                          0
                                                                                          Редактор странным образом чистит теги, которые не надо трогать.
                                                                                          Как отколючается эта фича?
                                                                                            0
                                                                                            autoclear: false
                                                                                            настройках возможно поможет
                                                                                            0
                                                                                            Багтрекинг на сайте не нашел. Придется баги сюда писать.

                                                                                            * Выделил одно слово из предложения. Нажал «Заголовок», получил весь абзац в виде заголовка.
                                                                                            * Не видны стили, которые применены к данному фрагменту.
                                                                                              0
                                                                                              Есди вставить в редактор видео, то в Crome все менюшки открываются ЗА ним и их не видно.
                                                                                                0
                                                                                                Редактор впечатлил: я выделил главную страницу ЖЖ и через Ctr-C Ctrl-V вставил её в редактор — вид страницы передан почти один-в-один.
                                                                                                  0
                                                                                                  Ах вот почему ЖЖ повис. Вы его весь выкачали! :)
                                                                                                  +1
                                                                                                  Заглянул в код редактора, в первых же строках увидел загаживание глобального пространства имен, что никак не есть jQuery-style.
                                                                                                  Это ужасно, дальше смотреть не стал.
                                                                                                    0
                                                                                                    Открываете IE8, выделяете текст полужирным, на сервер уходит текст в тегах STRONG. Открываете Firefox 5, повторяете, на сервер уходит font-weight. Что происходит?
                                                                                                      0
                                                                                                      разное соответствие стандартам JS и contenteditable. В общем-то не понимаю, зачем разработчики до сих пор пользуются ие-шными проприетарными функциями.
                                                                                                        0
                                                                                                        Вообще-то здесь застарелый баг FF. Не фиг форматировать через style
                                                                                                      0
                                                                                                      Баг с align'ом картинок. Вставляем картинку, делаем ей left или right, потом невозможно поставить «обтекание текстом: нет».
                                                                                                      Баг со ссылками. Делаем ссылку. Ставим курсор на эту ссылку, или выделяем ее, нажимаем в меню «Вставить ссылку». Открывается диалоговое окно, правим там что-нибудь, нажимаем «Вставить». Ничего не происходит. Закрываем диалоговое окно — опа! наши изменения применились.
                                                                                                        0
                                                                                                        Не стали использовать, так как не везде почему-то отрабатывает подгрузка фоток + нет мультизагрузчика фоток, а без него неудобно большие посты делать.
                                                                                                          0
                                                                                                          Cтолкнулся с проблемой, вся статика на проекте вынесена на отдельный поддомен (static.procject.com)
                                                                                                          соотвественно и redactor расположен там же.

                                                                                                          В данном случае при запуске редактора появляется ошибка

                                                                                                          RTOOLBAR is not defined
                                                                                                          static.project.com/js/redactor/redactor.js
                                                                                                          Line 1489

                                                                                                          из-за этого решил пока что его не использовать.

                                                                                                            0
                                                                                                            Есть у него болезнь которая у всех висивигов, если какую-то часть текста выделить заголовком к.л. уровня, выделяет весь параграф.
                                                                                                              +1
                                                                                                              Решается эта болезнь везде одинаково.
                                                                                                              Параграфы переопределить. т.е. ставим курсор в конце абзаца и жмем delete, затем enter.
                                                                                                                0
                                                                                                                век живи, век учись)
                                                                                                              +2
                                                                                                              увидев как называются файлы: redactor.js, redactor.css очень долго размышлял при чем тут «красный актер»…
                                                                                                              это меня видимо настолько раздражает транслит, что нивкакую не читалось как «редактор».
                                                                                                              а в целом оч понравился. разве что добавили бы поддержку jQuery-UI-тем.(лично мне это не нужно редактор идеально подходит под стиль моих проектов)
                                                                                                                0
                                                                                                                Подружить данное творение с mootools неполучилось. В FF 3.6 вставляется в редактор часть JavaScript кода.
                                                                                                                noConflict не помог. Вот тут демка: agel-nash.ru/redactor641/
                                                                                                                  0
                                                                                                                  Авторы редактора, кстати, выпустили новую версию.
                                                                                                                  Узнать, что нового и скачать можно здесь.
                                                                                                                    0
                                                                                                                    Судя по всему теперь этот редактор только платный :(

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

                                                                                                                    Самое читаемое