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

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

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

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

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

VK.com

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

Medium.com

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

HTML5 Contenteditable в действии.

Wikipedia

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

Look At Me (Arcticle)

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

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

StackOverflow

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

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

Wordpress не панацея

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

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

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

Назад в Drupal

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

Vanilla Editor

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

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

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

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

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

Упрощенный CKEditor 4

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

BUEditor на сайте DrupalSPB.org

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

Markdown + BUEditor по рецепту Андрея Юртаева

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

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

Rich-редактор

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

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

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:

CKEditor из модуля Textbook

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

Пример редактора TinyMCE с темой Ribbon.

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

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

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

Заключение

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

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

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

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