WYSIWYG-редакторы в Drupal: полюби их все!

Аватар пользователя kalabro

Текстовый редактор — одна из самых интимных точек взаимодействия человека с сайтом. В результате этого взаимодействия рождается контент. И родится ли он в муках, с кривым форматированием и разбитой клавиатурой или же муки будут исключительно творческие, а форматирование — аккуратное и приятное глазу, зависит от инструмента для редактирования текста.

Сколько времени автор затратит на публикацию нового материала? Сможет ли он выразить всё, что задумал (не нарушая политики сайта), с помощью предоставленного набора инструментов? В конце концов, как будет выглядеть конечный результат?
Без сомнения, всё это важные вопросы, которые непосредственно относятся к настройке текстового редактора на сайте.

Какой же редактор выбрать и установить на Drupal-сайт? Я поделюсь своим (в некотором смысле горьким) опытом.
Сегодня будет много картинок и совсем не будет кода.

Какие бывают текстовые редакторы

Прежде чем бросаться в омут модулей на Drupal.org, давайте посмотрим, как реализован пользовательский ввод на других сайтах.

VK.com

Если вы работаете с русскоязычной аудиторией, то скорее всего и ваши менеджеры, и ваши авторы, и ваши комментаторы отлично владеют нехитрым интерфейсом Вконтакте.

drupal-wysiwyg_vk_0.png

Medium.com

Сервис коллективных блогов, сосредоточенный на длинных вдумчивых текстах, имеет аскетичный, но функциональный WYSIWYG-редактор. Смотрите сами:

drupal-wysiwyg_medium.png
HTML5 Contenteditable в действии.

Wikipedia

Как известно, Википедию может писать любой желающий, для этого надо лишь совладать с Вики-разметкой, заточенной специально под особенности энциклопедии.

drupal-wysiwyg_wiki.png

Look At Me (Arcticle)

Разработчики из LAM показали, какой редактор они используют на своих сайтах:

drupal-wysiwyg_lam.png

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

StackOverflow

Совершенно по-другому обстоят дела с программистами. Здесь царствует Markdown и его производные:

drupal-wysiwyg_stackoverflow.png

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

Wordpress не панацея

18,9% всех сайтов работают на Wordpress (на 27.07.2013). Страница добавления материала в этой CMS часто приводится в пример другим движкам. Я и сама была в восторге от визивига в Wordpress, пока не поработала с ним плотнее и не выяснила три вещи:

  • Редактор идеально вшит в архитектурные особенности WP и пытаться скопировать его в другой CMS бессмысленно.
  • Клиентам точно так же сложно работать с редактором WP, как и с любым другим. Ошибка считать человека технически подкованным только потому, что он умеет пользоваться электронной почтой.
  • Из коробки WP — довольно простая система. Любое усложнение требует существенной технической доработки и обучения персонала.

Про битрикс можно не буду рассказывать?

Назад в Drupal

С одной стороны, в друпале из коробки нет никакого WYSIWYG-редактора. Да, друпал расставит параграфы, разметит ссылки, отфильтрует небезопасное содержимое, но с вводом HTML-ля в текстовое поле не поможет. С другой — есть великое множество контриб-модулей, расширяющих стандартные возможности друпала. Сразу предупреждаю, что я не буду перечислять их все, потому что их реально очень много. Вместо этого я рассмотрю подходы, которые можно использовать для настройке текстового редактора в друпале.

Vanilla Editor

Надёжное, проверенное, поддерживаемое всеми браузерами и знакомое всем пользователям решение — textarea. Добавьте к полю немного стилей, чтобы в него «захотелось» что-то написать. Минимум функционала, минимум багов. Проверка орфографии, ресайз поля, восстановление текста при случайном закрытии вкладки — всё это давно делает браузер пользователя.

drupal-wysiwyg_vanilla.png

Как вы догадались, это решение идеально для комментариев, контактных форм, личных сообщений.

Лёгкий редактор

Обычно такой редактор имеет минимальный набор функций, например, «Жирный», «Курсив», «Цитата», «Картинка» и работает в связке с фильтром Filtered HTML.

Лёгкий редактор можно собрать практически из любого доступного для друпала редактора:

drupal-wysiwyg_ckeditor_light.png
Упрощенный CKEditor 4

CKeditor 4 — именно WYSIWYG-редактор. Это значит, что в поле редактирования пользователь должен видеть именно то, что будет в итоге опубликовано на странице.

drupal-wysiwyg_bueditor.png
BUEditor на сайте DrupalSPB.org

Теги могут запутать неподкованного пользователя, но «гики» встретят его с гораздо большим рвением, чем WYSIWYG-аналог. BUEditor завоевал особенную популярность у русскоговорящих друпалеров.

drupal-wysiwyg_markdown.png
Markdown + BUEditor по рецепту Андрея Юртаева

Не стоит недооценивать Markdown. Он значительно проще HTML-разметки и будет набирать популярность по мере подрастания поколения, не знающего олдскульного веба. Например, новая блого-платформа Ghost предлагает использовать именно Markdown.

Лёгкий редактор должен оставаться лёгким. Пользователя не нужно обучать работе с ним, хотя в зависимости от назначения (записи в блог на литературном сайте или комментарии к фотоприколам) интерфейс такого редактора может меняться.

Rich-редактор

«Тяжёлый» полноценный редактор используется для создания больших материалов со сложной структурой и разнообразным медиа-контентом. Обычно такой редактор используется в связке с сильно расширенным Filtered HTML (например, с помощью WYSIWYG Filter или HTML Purifier) или даже с Full HTML.

Лидером в этой весовой категории является всё тот же CKEditor.

drupal-wysiwyg_ckeditor_full.png
CKEditor 4 из коробки

Это очень мощный редактор, однако его стандартная поставка громоздкая и для профессиональной работы с сайтом не оптимизированная. Чтобы привести его в порядок, придётся повозиться с многочисленными настройками, API, плагинами, стилями, а также с API контриб-модулей, которые должны взаимодействовать с редактором.
В Drupal Planet иногда проскакивают суровые статьи на тему кастомизации CKEditor'а: WYSIWYG Module + CKEditor: Taming the Beast, Leveraging CKeditor template to theme Drupal contents.
На Drupal Meetup #5 Николай Шаповалов поделился своим опытом настройки CKEditor: Облегчаем жизнь редактору. Лучшие способы редактирования и добавления материла..
Существуют даже целые модули-кастомизации на Drupal.org:

drupal-wysiwyg_textbook_editor.png
CKEditor из модуля Textbook

TinyMCE — ещё один мощный визуальный редактор HTML-разметки.

drupal-wysiwyg_tinymce.png
Пример редактора TinyMCE с темой Ribbon.

TinyMCE менее популярен, хотя не менее гибок по сравнению с CKEditor. Он по умолчанию используется в таких сборках, как Panopoly и OpenAtrium, так что в его стабильности сомневаться не приходится.
Статьи тоже иногда встречаются: Adding and Controlling TinyMCE Fonts in Drupal.

Часто бывает так, что навороченные редакторы только мешают. Например, я гораздо быстрее пишу HTML, чем ориентируюсь в кнопках визуального редактора. Что мешает просто писать HTML?
Я называю такой подход IDE-style.

drupal-wysiwyg_codemirror.png

CodeMirror c автодополнением, Autosave на случай падучки, приятный шрифт и полный контроль над HTML-разметкой.
Работая в таком редакторе я (выступая в роли автора) чувствую себя комфортно, а это самое главное.

Заключение

Тема WYSIWYG-редакторов в друпале считается болезненной. С одной стороны, разработчики часто попадают в ловушку «Скачать какой-нибудь редактор с Drupal.org и дело в шляпе», с другой — конечные пользователи жалуются на недружелюбный друпал до такой степени громко, что CKEditor даже включили в ядро Drupal 8.

Поработав какое-то время с текстами в друпале, я сделала для себя несколько открытий, которые кому-то покажутся очевидными, а кому-то, возможно, откроют глаза:

  • Под разные задачи — разные редакторы.
  • Не стоит искать идеальный модуль.
    Чем больше подходов, модулей, плагинов вы знаете, тем проще вам будет настроить редактор под конкретную задачу.
  • Лучше идти от меньшего к большему.
    Т.е. заранее отключать все ненужные кнопки в редакторе. Они не будут смущать клиента и причинять боль разработчику.
  • Не пренебрегать Vanilla Editor’ом.
  • Выделять время на настройку редакторов.
    Это важная задача, которая часто недооценивается как клиентами, так и разработчиками.

P.S. Как я писала этот пост:
Evernote → Google Docs → Sublime → DrupalSPB :)

Пожертвования идут непосредственно автору статьи (по умолчанию 200 руб): 

Комментарии

Аватар пользователя Konstantin Komelin

Катя, что с тобой?

Катя, что с тобой? Непрограммерская статья :)
А серьезно: приятно читать, полезно знать! Вэри гуд!

Про битрикс можно не буду рассказывать?

lol

Я за Markdown. Андрей даже инициативу создал по включению его на сайте сообщества:
Поддержка Markdown в редакторе. Жмите палец вверх в инициативе, чтобы поддержать идею (необходима авторизация).

Аватар пользователя kalabro

Катя, что с тобой?

Катя, что с тобой? Непрограммерская статья :)

Между строк читай, между строк :)

Наболело на самом деле. Я много читаю блогов о друпале на друпале. Иногда коммент оставить — целое приключение, потому что кто-то «просто включил» редактор.