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

Но потом ему надоело мучаться и отлаживать свой редактор под всевозможные браузеры и он стал использовать TinyMCE :)
Тини — очень жирненький« редактор
(ну очень очень жирный в адвенсед режиме)
К томуже вообще визивинги — зло.
После трех лет сиденья на Тини и им подобных мы слезли до уровня обычного html
потому что
1.Верстку, цвета, шрифты, отсыпы потом править не надо
2.Можно сделать все что угодно
ПС пункт 1.1 — ранше у нас документы после тини обрабатывались фильтром аш на 40 строк. Смотря на его выдачу я все думал… а зачем нам этот тини если я все красивости режу?
(имеется в виду житье бытье не 10 страничного сайта(которые в принципе можно полностью на тини рисовать в админке) а новостного портала)
Wysiwyg зло для нас с вами, т.е. человеку, который знает, что такое html и как поставить «непонятные буковки», чтоб получилось нужное. Когда сайт будет наполнять человек(тот же офис-менеджер), имеющий опыт работы только с текстовыми редакторами(ака ворд\врайтер), ему гораздо проще выделить кусок текста, нажать жирную B, выделить другой и выбрать желтое выделение, чем прописывать тэги(а перед этим изучать их)
Да и для «нас с вами» бывает очень полезно отвлечься и написать в блог, не заморачиваясь такими (хы) сложными словами как html, css и даже вёрстка…
Если есть-значит имеет спрос, если имеет спрос, то появляются новые реализации, так зачем же говорить что не надо или твёрдо утверждать что кул, нет — кто мешает сделать дабл-окно: хочешь-пиши в html, хочешь-рисуй в висивиге… вот так я думаю…
А вообще висивиг или невисивиг — холивар.
Я в своем проекте настроил tinyMCE на работу с BB-кодом, благо плагин для BB парсера там был, его нужно было только доработать. В итоге генерирует HTML не редактор, а парсер на серверной стороне. Проблемы с кривыми стилями, с и прочими рудиментами удалось избежать.
Дурацкий вопрос- а как ВВ коды визуализируются в процесе написания документа?
Редактируется html, он в bbcode перегоняется только при сохранении. Ну а при загрузке редактора bbcode перегоняется в html.
Да, это реально головная боль, учитывая еще, что все браузеры генерят разный код. У меня давно в голове витает идея строить документ не одним редактором, а разными инструментами по частям, которые будет удобнее использовать и проще контролировать.
Большого зла
чем Ctrl+V из Ворда
придумать нельзя :)


А визивинги обычно это позволяют :)

Я не поэт — я наученый горьким опытом :)
Можно. Copy-paste из excel и со страниц конкурентов, когда самому текст писать лень.
Зачастую, функциональность визуальных редакторов делают сильно ограниченной, чтобы поддержать общий стиль оформления сайта. В тоже время, можно скопировать документ, оформленный вордом и вставить в редактор через IE. При этом генерируется ужасный html со спец-тегами ворда, а также по максимуму сохраняется форматирование, что порой просто чудовищно смотреться на сайте.
у тини есть три вида ввода, из ворда- убирая лишние теги(хоть и косо иногда достаточно), как текст(вобще без тегов, обычно мною подключается) и просто копирование(со всеми злыми тегами).

Имхо большее зло, что иногда на определенных сочетаниях кода любой визивиг сколбашивает и приходится чиститьполучившееся уже без визуализации. Те кто много шаманил с визивигами думаю подтвердят мои слова.
да ладно, в гзипе 60кбайт… Ну если все плагины засунуть, то может под 80 будет. Все равно не так уж «жирно»
Все зависит от того, как вивиг преобразует текст. Точнее тэги. Тот же Tiny отдает действительно весьма грязный код. А, к примеру, FCKeditor — вполне неплохой. Плюс к тому есть ф-ция чистки вордовского кода. Кстати, скрипт его чистки достаточно прост — хватает 5-10 регулярок.

К сожалению, большинство секретарш или менеджеров не могут позволить себе нормально работать с контентом без вивига. А принцип «это уже их проблемы» не катит — клиент он, как правило, прав.
К сожалению то, что описано в статье это та часть, которая делается за 10 минут и особых проблем не доставляет. Всё проблемы начинаются, когда вы пытаетесь вставить текст в середину другого текста, оформить его, перекрывая другое форматирование, и тому подобные вещи — это сложно, потому что на DOM это громоздко и тяжело. Гораздо проще сделать как в vBulletin — они не зря используют BBCode как основу, а видите вы лишь результат парсинга этого самого BBCode, когда пишите пост. Я мучался с собственным редактором в одном проекте 3 месяца и он очень далёк от идиала, хотя и умеет вставлять изображения с закачкой, форматировать текст, переводить текст с транслита на русский на лету и прочие стандартные вещи. В итоге получился тоже приличный кусок кода, не шибко сильно уступающий тому же TinyMCE в минимальном варианте.

Если вам нужен WYSIWYG — берите готовый, либо пишите голым HTML как это сделано тут на Хабре. Исключения — для самообразования ;)
ИМХО, если человек после выделения текста и нажатия кнопки на панели инструментов увидит результат (например, заключение текста в тэг B), он очень быстро поймет взаимосвязь данных событий. Так что designMode крайний случай для самых ленивых. А вообще, хороший редактор должен использовать стили сайта, а не тэги…

PS. Ньюанс?
Вся проблема визуальных редакторов в том, что они не выполняют своей задачи. Мнимая возможность дать менеджеру самому забить и правильно оформить контент радует до тех пор, пока не взглянешь на результаты его работы. В конечном счете все равно приходится переверстывать руками и оказывается, что либо руками верстать надо всегда, благо там ничего сложного как правило нет, либо использовать заточенный под конкретный сайт конкретный инструмент.
Извините, что оффтоп, но вас не учили переносить длинные строчки кода? Не у всех же пятьсоттыщдюймовые широкоформатные мониторы…
Не могу сказать что статья совсем плохая, но как человек в свое время разбиравший по ней как делается визивиг, могу сказать, что многие вещи из статьи либо реализуются более изящно(создание ифрейма через жабаскрипт), либо более аккуратно гибко и не в лоб. Основы познать можно, но имхо сложности и косяки вобще не рассмвтриваются.
> создание ифрейма через жабаскрипт
Я в комментарии пояснил, зачем создавать фрейм через яваскрипт — через DOM его невозможно будет оформить по-нормальному. Не через стили, не через атрибуты. Косяки я также постарался обойти, абсолютно такими же методами, какими пользуются tinymce и другие популярные редакторы, не понимаю о чем Вы. Основа есть — на нее можно уже навесить все, что душа пожелает, будь то тулбары, дополнительные модули и т.п.
автор, тащи статью в тематический блог, или, на крайняк, в уроки французского, что ли… кармы вроде должно хватать, но всякий держи ещё) хорошая статья, хорошая дискуссия, спасибо :)
Автор, нужно было пример работающего редактора выложить. Код есть, а как и где он будет работать не понятно

Вобще самопальные редакторы зло. Если тот же Tiny достаточно легко поддерживать, достаточно скачать девелоперскую версию, то в самопальном поди разберись. Обычно это театр одного актера — автора скрипта
Я, в первую, очередь ставил целью рассказать о принципе создания редактора. Для минимального функционирования здесь не хватает пары функций и нескольких тегов. До полноценного редактора еще плыть и плыть. Ответ на вопрос — писать или не писать свой редактор — для каждого свой и обусловлен техническим заданием или собственным энтузиазмом.
Написать достаточно внятный визуальный редактор весьма непростая задача и, как показала практика, не оправдывает надежд и потраченного на него времени т.к. результаты порой приводят к тому, что на сайт без содрогания трудно смотреть.

Когда на сайте есть такой редактор, то предполагается, что пользователю будет проще писать текст и правильно его оформлять, однако уважаемые писатели ударяются в крайности: одни начинают заниматься дизайном текста (очень трепетно подходят к выбору размера, начертания, цвета шрифта и прочему выделению, совершенно не воспринимая общий стиль сайта), другие же делают просто Ctrl+C Ctrl+V из ворда и успокаиваются. Самое страшное, когда такой писатель начинает пробовать писать HTML, не предусмотренный многочисленными инструментами. Против таких начинающих «верстальщиков» нам пришлось в свое время сделать фильтр текста, который бы пропускал только то, что предусматривается инструментарием редактора.

Вообще редакторы, которые порождают HTML, в большинстве случаев для публикации материалов на сайте не нужны, а нужен редактор, который был бы компактным (небольшой объем скрипта), исключал самодеятельность в дизайне, обеспечивал бы (как минимум) похожесть текста при редактировании тому, что будет отображаться, но самое главное, что бы он помогал работать над текстом (в идеале совсем не беря в руки мышь). Большое количество тулбаров с инструментами не столько помогает, сколько мешает и подталкивает писателя заняться не текстом, а оформлением. Кстати, очень редко можно встретить грамотное дублирование инструментов горячими кнопками.

Близким к идеалу является редактор, основанный на разметке типа markdown (но без возможности вставить HTML) т.к. там весь текст виден (нет скрытой части в виде атрибутов тэгов), текст весьма похож на то, что потом будет отображаться после преобразования в HTML (конечно за исключением картинок). Сложность написания редактора для такого текста примерно сопоставима с написанием редактора на основе HTML, но результат использования намного лучше, да и товарищам, далеким от разработки, объяснять правила легче. Есть, конечно, еще и вики разметка, но она достаточно перегружена правилами.

И вообще, любой инструмент должен быть не «навороченным», а удобным. И удобным не для разработчика инструмента, а для пользователя.
Замечательно. Как раз пытаюсь сделать wysiwyg-редактор, который должен быть очень простым, обладать буквально двумя-тремя очень примитивными, но довольно специфическими возможностями оформления. Нормальной статьи о принципах их построения как-то не попадалось, а разобраться по коду многочисленных существующих редакторов не получилось — у нас с ними слишком разный уровень владения джаваскриптом прочим домом :)
Большое спасибо автору.
UFO landed and left these words here
UFO landed and left these words here
Я в свое время переделал под себя openWYSIWYG: изменил способ вызова диалоговых окон (раньше там использовался window.open(), а я их сделал на слоях), добавил поддержку таблиц (добавление строк, колонок и т.д.), возможность загрузки файлов, музыки, видео и т.д.
На стороне сервера сделал «чистильщик» кода на основе PEAR:: HTML_Safe.
В общем, получилось неплохо, по крайней мере результат мне гораздо больше нравится чем TinyMCE. Только не упрекайте меня созданием велосипеда, я тогда только начинал изучение JavaScript, а это была неплохая практика, а этот висивик использую до сих пор.
Сейчас очень часто использую jQuery, хотелось бы иметь нормальный висивик именно на jQuery, но полностью меня устраивающего пока что не нашел. Нравится идея WYMeditor, но его нужно доработать. Пока что руки не доходят.
Отличный пост! Как раз в ближайшее время понадобится простенький редактор, но использовать промышленных монстров не хочется, потому как люблю получать ровно столько сколько требуется плюс с возможностью добавления нужных для проекта фич. Поэтому написания своего минимального редактора считаю лучшим выходом. Еще раз спасибо за информацию!
Я лично склоняюсь к редакторам на основе вики-разметки. Например, textile или markdown.
Просто, удобно, понятно. Основные правила разметки запомнить легко. Особенно в textile.
Вопрос: есть ли грабли и отличия при использовании contentEditable вместо designMode? (кроме поддержки различными браузерами, сейчас все новые версии основных браузеров поддерживают ).
Моя идея в том, чтобы любому div'у с contentEditable можно было бы на лету прилепить панель редактирования (например, с position:fixed), т.е. реализовать inline-редактирование на любой странице сайта, с отслеживанием событий вставки из буфера обмена (чтобы, опять же, на лету), чтобы очищать форматирование.
Если отличий нет, попробую портировать FCK на contentEditable.
Only those users with full accounts are able to leave comments. Log in, please.