Визуальный редактор для MaxSite CMS на базе TinyMCE

Более двух лет делаю сайты на MaxSite CMS (исключений за этот период буквально несколько). Это отличная система управления сайтом, чем глубже с ней знакомлюсь, тем больше ей восхищаюсь – оптимизированная, продуманная, быстрая, нетребовательная к серверу. Но есть у нее существенный для конечных пользователей (клиентов) минус – отсутствие удобного визуального редактора.

Эта статья – обзор существующих редакторов для MaxSite CMS и описание моего плагина визуального редактора на базе TinyMCE. (Переработка плагина, который я уже достаточно давно ставлю своим клиентам.)

Требования к редактору страниц для CMS

Редактор страниц для CMS должен:

1. Работать во всех браузерах.
2. Не требовать (минимизировать) обучения пользователя – быть интуитивно понятным, напоминать интерфейс текстовых редакторов (с этим аргументом можно спорить, но лично я убежден, что когда я сдаю заказчику сайт, он должен не только выполнять свою функцию, но и быть удобным в эксплуатации).
3. Быть русскоязычным.
4. Позволять вставлять текст из MS Word и других текстовых редакторов без копирования стилевого оформления текста.
5. Допускать загрузку файлов (изображений, в первую очередь) из интерфейса редактора и удобную вставку ссылок и картинок в текст страниц.
6. Позволять вставлять заранее подготовленные блоки со специфическим оформлением (шаблоны) без копирования/вставки HTML‑кода (к примеру, блоки‑ссылки внизу страницы «Сколько стоит сделать сайт» сделаны такими заранее сверстанными блоками).
7. Формировать семантичный валидный HTML‑код с удобным форматированием (переносы строк).
8. Давать пользователю возможность оформления текста только теми элементами, которые допустимы в контентной части страницы.
9. Минимизировать возможность «сломать» верстку при редактировании страниц.
10. При вставке каких‑либо элементов, позволять менять их свойства без работы с html‑кодом (обтекание картинок текстом, например).
11. Позволять работать с таблицами.
12. Красиво выглядеть.
13. Позволять комфортно работать напрямую с HTML‑кодом.

Увы, все существующие на данный момент плагины визуальных редакторов не позволяют загрузить файл/изображение со страницы редактора и легко вставить его в нужное место текста (приходится копировать адрес файла со страницы загрузок).

Невизуальные редакторы я не рассматриваю, т. к. они требуют обучения клиента html или bb‑кодам, что само по себе не плохо, но для коммерческих продуктов неприменимо – если клиент хоть раз видел интерфейс визуального редактора – очень сложно объяснить, зачем ему напрягаться и учить что‑то новое. И даже если получится, это все равно будет выглядеть как неспособность (или лень) установить «нормальный редактор» с вашей стороны. Я своих клиентов уважаю и стараюсь лишний раз не напрягать.

Критика существующих визуальных редакторов

Встроенный визуальный редактор

Включен по умолчанию.

Особенности:

1. Работает по‑разному в разных браузерах. Часть функционала недоступна в IE (а это наиболее распространенный браузер на офисных компьютерах на данный момент (январь 2012)).
2. Не русифицирован.
3. Текст из текстовых редакторов вставляет с сохранением оформления. Средств вставки текста без оформления нет.
4. Код html формирует без тегов параграфов, при переключении между оформлением и кодом меняет код. Это полнейший кошмар.

Пример: идем за типографической «рыбой» в википедию, копируем «рыбу»; вставляем в редактор, видим нормально вставленный текст (см. картинку под заголовком).
Переключаемся в режим просмотра кода (самая последняя кнопка в нижнем ряду) и обратно в визуальный режим. Видим следующее:

В тексте появились переносы строк (ОТКУДА???). А каждый перенос строки в данном случае – новый параграф при показе текста в публичной части сайта.

Писать об остальных проблемах данного редактора не имеет смысла – описанная выше особенность твердо говорит: для работы этот редактор не подходит. И уж, тем более, сдавать клиенту сайт с таким редактором – явное неуважение и непрофессионализм.

Визуальный редактор editor_nic

Версия: 0.2 alpha. Автор: Ю. Белотицкий.

Особенности:

1. Не русифицирован.
2. При нажатии кнопки выравнивания текста (к примеру, выравнивание по правому краю), текст оборачивается в div с CSS‑свойством, а не добавляется свойство тегу параграфа (за неимением тегов параграфа).
3. При нажатии Enter формируется не новый параграф, а добавляются br.
4. Текст страниц существоенно искажается при выводе в публичной части сайта.

Пример: Вставляем в окно редактора ту же типографскую «рыбу» и сохраняем страницу. При сохранении был один абзац, после сохранения – четыре. То, что выводится в публичной части, назвать иначе, чем «ужас» язык не поворачивается:

<div xmlns="http://www.w3.org/1999/xhtml" style="text-align: left;">Sed ut perspiciatis, unde omnis iste natus error sit voluptatem <p/>
<p>accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab</p>
<p> illo inventore veritatis et quasi architecto beatae vitae dicta sunt, </p>
<p>explicabo.</p></div>

То есть, идет первая строка, потом некая конструкция <p/> (пустой параграф) и далее — каждая строка в отдельном параграфе.

Как и в предыдущем случае, далее описывать проблемы этого редактора нет смысла – он уже непригоден к использованию.

В обоих случаях, причина «странного» поведения редакторов – система авторасстановки тегов, под которую Максим (автор MaxSite CMS) делал встроенный визуальный редактор.

Мой визуальный редактор на базе TinyMCE

Естественно, описанная выше печальная ситуация с редактором страниц меня не устраивает и никогда не устраивала. Доколе, доколе, господа... Тем более, что я включен Максимом в команду разработчиков MaxSite CMS.

Достаточно давно я написал плагин визуального редактора на базе TinyMCE и ставил его многим клиентам, но как‑то не доходили руки до написания этого поста.

За последние несколько дней я несколько переделал плагин и вот, выкладываю его на всеобщее обозрение как отличную альтернативу имеющимся редакторам лучшей, на мой взгляд, системы управления сайтом – MaxSite CMS.

На момент написания этого текста плагин находится в бета‑версии. Постепенно буду улучшать и модернизировать его.

ВНИМАНИЕ!
Этот плагин нужно включать сразу после установки движка или не использовать вовсе, так как он несовместим с системой авторасстановки тегов MaxSite CMS (отключает ее штатными средствами) и пишет в БД html‑код текста записи.
То есть, если включить и использовать этот визуальный редактор сразу после установки движка, можно наслаждаться удобным добавлением/редактированием записей, но если записи уже есть, потеряется форматирование текста в уже имеющихся записях. Примерно та же ситуация с выключением этого плагина – созданные с его помощью записи могут выводиться некорректно.
Фактически, это означает, что нужно на одном сайте постоянно использовать или стандартный редактор, или альтернативные, вроде ДиГрафа или моего.

Установка

Распаковать содержимое архива в папку application\maxsite\plugins\editor_tinymce\ на сервере. В админке на странице «Плагины» включить плагин editor_tinymce.

Особенности

1. Работает.
2. Стилизованный интерфейс (кнопки на панели напоминают gmail, непоказанные кнопки не прорисованы (для изображений – оставлены макеты в формате PSD), слегка переработано визуальное представление всплывающих окон).
3. Включены необходимые плагины редактора, в том числе inlinepopups, открывающий настройки добавляемых/редактируемых элементов в модальных окнах, а не в отдельных окнах браузера.
4. Минимум лишнего.
5. Добавлена кнопка вставки произвольного html‑кода.
6. Работа с шаблонами.
   Это возможность вставлять в текст страницы заранее сверстанные блоки html‑кода (смотри кнопку‑ссылку «Скачать») тремя кликами мыши (без необходимости копировать откуда‑то код и вставлять блок в режиме кода).
   Чтобы предопределить шаблонные блоки, достаточно загрузить в каталог application\maxsite\plugins\editor_tinymce\templates файлы с нужными блоками – интерфейс плагина считает содержимое этой папки и выведет список файлов для вставки. Для примера, я разместил в каталоге два файла с html‑содержимым.
7. Модифицирована работа диалогового окна добавления изрбражений: при выборе правого или левого обтекания, добавляются внешние отступы. (Если картинка слева, ей добавляются отступы справа и снизу, чтобы текст не примыкал к изображени.; если картинка справа – отсутпы добавляются слева и снизу; если обтекания нет, отступы обнуляются.)
8. Enter – новые параграф, Ctrl+Enter – перенос строки (br).
9. В диалоговых окнах сохранены все параметры, добавленные авторами TinyMCE (некоторые из них малоприменимы или некроссбраузерны).
10. В списке формата блоков оставлены: блок (div), параграф (p), заголовки 2‒5 уровней и блок цитаты (заголовок 1го уровня отсутствует, т. к. это заголовок страницы).
11. Удобная работа с таблицами.
12. Ограничено количество цветов для текста.
13. Отсутствует кнопка «подчеркнутый текст» по соображениям юзабилити (подчеркнуты, обычно, ссылки).
14. Удобный редактор html‑кода (можно развернуть на всю страницу) с отключенной проверкой орфографии.
15. Сохранены все плагины TinyMCE, которые идут в поставке этого редактора. Для каждого плагина есть минимизированная версия (которая подключается и работает) и форматированная (разбор и модификация работы).

В планах

1. Скрыть в диалоговых окнах редкоприменяемые (ненужные и вредные контент‑менеджеру) настройки.
2. Добавить хоть какой‑то интерфейс быстрой загрузки файлов на сайт без перехода к странице загрузок.
3. Полноэкранный режим по нажатию F2.

Ваше мнение

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

28 января 2012
Категория: Web–разработка
Метки: MaxSite CMS, визуальный редактор, плагин
Комментировать ↓