January 17th, 2008

main

5 причин, почему визуальный html-редактор в админке - зло

Originally published at [ilvar.ru]. You can comment here or there.

  1. Визуальный редактор заставляет думать не о семантике, а о представлении. В результате либо результат на странице сайта выглядит не так, как в админке (потому что стили поверх наложились), либо стили жестко прописываются редактором и уже не могут меняться через CSS, “плавают” на разных страницах и заставляют контент-менеджера постоянно вручную выставлять шрифты, цвета и прочие отступы.
  2. Визуальный редактор позволяет копипастить текст из “Ворда”. Отлично! Некоторые продвинутые редакторы даже вычищают ненужные тэги. Но “мусора” все равно остается выше крыши даже в маленьких документах. А большие документы достаточно часто подвешивают браузер напрочь.
  3. Даже если текст с самого начала редактировался через админку, визуальные редакторы частенько добавляют лишний код, лишние стили и т.п. Например, если расстояние между абзацами у нас полстроки, а админка вместо абзацев иногда юзает <br/></br> - результат получается некрасивый.
  4. Визуальный редактор тянет за собой мегабайта полтора картинок и яваскрипта. Это добро, конечно, кэшируется браузером, но через GPRS, например, в админку уже не полезешь лишний раз.
  5. Яваскрипт визуального редактора заметно подтормаживает загрузку страницы, особенно если полей для редактирования на странице админки несколько.

Какой выход? Есть три варианта различной степени брутальности :)

  1. Почти визуальный. Использовать WYMeditor или его аналоги. Не избавляет от проблем с производительностью, но хотя бы позволяет разработчику сохранить контроль над внешним видом документа.
  2. Голый. Использовать html или bbCode, возможно, с дополнительными кнопочками-хелперами. Боюсь, что в этом случае контент-менеджер может выдавать грязный код (если как-то знает HTML) или постоянно дергать разработчка вопросами (если не знает HTML).
  3. Почти идеальный. Использовать wiki-разметку или Markdown. Да, потребуется какое-то время на обучение, но с другой стороны, все необходимые конструкции запросто помещаются на клочке бумаги (для повешения у монитора, естественно), а сама разметка является достаточно интуитивной. Не говоря уже о возможности простого автоматического diff-а изменений, в случае необходимости.

Я в своем блоге использую Markdown для семантических частей - таких, как параграфы, списки и т.п., а ссылки и картинки вставляю в HTML встроенными хелперами Wordpress - они достаточно удобно сделаны.