Редакторы контента, использующие contenteditable

    На последнем Web Standards Days, проходившем в Москве, Антон Немцев рассказывал про идею редактирования контента непосредственно на странице с этим самым контентом, используя атрибут contenteditable.

    Спросив google, я нашел два вполне уже рабочих редактора, которые можно попробовать применить в одном из проектов.

    Mercury Editor


    Mercury Editor

    Позиционируют себя как аналог TinyMCE или CKEditor, но встраиваемый непосредственно на страницу для использования с определенными блоками контента.

    Демка выглядит вполне привлекательно — сверху страницы появляется панелька, а в контенте подсвечиваются блоки, доступные для редактирования.

    На сайте редактор подается как gem для RoR, но есть ссылка на wiki проекта на Github, где написано как использовать его без RoR.

    Заявлена поддержка Firefox 4+, Chrome 10+, Safari 5+

    Aloha Editor




    Концепт тот же — области, доступные для редактирования, подсвечиваются и при клике на них приезжает панелька с кнопочками.

    Изначально выглядит победнее, чем Mercury Editor, но на сайте доступно около двух десятков плагинов, расширяющих функционал — например, плагин для вставки картинок и редактирования их атрибутов.

    Явно поддерживаемые версии браузеров не нашел, но опытным путем выяснил, что он так же как Mercury Editor работает в Firefox и Webkit + еще в IE9.

    UPDATE, сделаный на основе комментариев:
    NicEdit — видел его когда искал, но демки его меня почему-то не впечатлили. Хотя он вполне достоен внимания.

    Визуальный редактор на jQuery от Имперави. Минималистичный редактор с симпатичным дизайном. Внешне понравился, функционал не богат, но вполне достаточен.

    Best In Place — суперминималистичный редактор, который позволяет только редактировать контент — можно использовать, если нужно редактировать введенные ранее в формы с некоторым набором параметров данные.
    Поделиться публикацией

    Похожие публикации

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

      0
      В принципе выглядит привлекательно, судя по всему не такой перегруженный, чем известные аналоги, и в этом их явный плюс. Aloha Editor попробовал на IPad, работать очень даже приятно.
        +1
        createjs.org/ — еще один вариант редактирования контента
          +1
          Разве не все они поддерживают contentЕditable (только для старых бр-ров Gecko — degignMode)?
          Ссылка с пояснениями. Или основная идея в том, что редактируется блок прямо в тексте? Но тогда статью следовало бы так и назвать, «Инлайновые веб-редакторы» или что-то подобное. («inline online») :)
          • НЛО прилетело и опубликовало эту надпись здесь
              +1
              Там скорее проблема не столько с самим wysiwyg, сколько со стилями отображения как контента, так и панелей инструментов редакторов. В API никаких особых изменений после IE5.5 не было.
                0
                Большая часть редакторов использует iframe с designMode. Я так полагаю сделано это для того чтоб использовать свои стили и более легкую работу с контентом. По поводу статьи не мешало бы добавить nic editor и еще парочку (всех не припомню). Самый привлекательный на мой взгляд это aloha editor.
                  0
                  Редакторы делались в designMode, потому что еще не так давно contentEditable мало где работал или очень глючил.
                    0
                    На сколько я помню в старой opera и ff сontenteditable работал. Хрома тогда еще не было. С глюками не сталкивался, но свой мини wysiwyg в ту пору написал.
                    0
                    Да, NicEdit тоже можно добавить. Я его видел, но что-то демки меня не впечатлили. Но для полноты коллекции добавлю.
                0
                Главная проблема всех подобных редакторов — непредсказуемый итоговый код, в разных браузерах он будет разным.
                В этом кроется главное их отличие например от TinyMCE, который генерирует одинаковый код в разных браузерах.
                  0
                  В tinyMCE свой движок уже как полтора года примерно. Раньше было так же как и в остальных через хаки.
                  0
                  Использую в рабочем проекте алоху. В целом, впечатления положительные. Единственное, с апи и документацией туговато
                    0
                    Довольно крутой инлайн-редактор в Google Sites, вот такой бы движок фришный…
                      0
                      Есть отличный отечественный редактор imperavi. Вот тут есть AIR режим, выглядит примерно как ваш второй скриншот (для появления панели нужно выделить текст).
                        0
                        Как-то использовал этот редактор на проекте и скажу вам, что он сыроват пока. Была необходимость ковырять исходник из-за возникшик косяков.
                          0
                          Использую его в двух проектах — пока ничего лучше не встречал. Например, TinyMCE и CKEditor — слишком большие и их рационально использовать в админке, а мне нужен редактор для «широких масс», вот этим редактором и стал Imperavi. А на счёт сыроват, ну, я фиксил 3 бага, отправил патчи — их приняли и всё стало совсем хорошо.
                        +1
                        Спасибо, что потратили время и нашли редакторы. Давно была мысль, что контент нужно редактировать непосредственно в «среде обитания», но никак руки не доходили до поисков, а вы молодец. Еще раз благодарю!
                          0
                          Пришлось недавно писать самостоятельно, поскольку ни один из предлагаемых гуглом не подходил под задачу. На удивление быстро справился. Общий вывод — шаблонизация в таких ситуациях малоэффективна, по весу тоже не везде всё в порядке. Плюс еще с кроссбраузерностью во время моего использования визивигов было туговато, сейчас может и пофиксили, но «неприятное чувство все-таки осталось»
                            0
                            А загрузку картинок пилили?
                            0
                            В свое время тоже стояла задача редактирования сайта и шаблонов, пошел немного другим путем. В итоге получился редактор с функцией перетаскивания объектов, редактирования шаблонов и хелпер по html тегам. Из вкусностей — быстрая синхронизация файлов с проектом, подсвет доступных переменных шаблона и выравнивание кода с отступами. Редактор бесплатный, как и весь проект, под который он написан.
                              0
                              А мне в своё время понравился Best In Place gem. Не так круто, но для много вполне подойдёт.
                                0
                                Редактор кода встроенный в Chrome Developer Tools написан на contentEditable.
                                  0
                                  Скоро будет релиз rizzoma.com, функционал похож на google wave, но написан на других технологиях, с использованием свойства contenteditable, а не gwt. Работает значительно быстрей. Пока что можно поюзать тестовую версию.

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

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