Когда-то давно, полтора года назад, разработал для домовой страницы модуль Typofilter, исправляющий дефисы на тире, заменяющий (c) на ©, в общем — полезный. В модуле использовался Типограф, несколько измененный под мои нужды и встроенный в систему фильтров Друпала. Модуль работал вполне исправно (да и сейчас работает), но пользоваться им мне в последнее время надоело.

Во-первых, так как модуль по сути — фильтр в форматах ввода, то чтобы насладиться оттипографленным текстом заметки или комментария, нужно нажать «Сохранить» или хотя бы «Предпросмотр», то есть перезагрузить страницу. Во-вторых — непонятно, почему этим должен заниматься сервер, когда на самом деле написание красивого текста — забота клиента (то есть браузера). В третьих, я как раз недавно включил для всех редактор BUEditor, и кнопка «Типограф» была бы очень кстати.

В общем, решил я портировать «Типограф» в JavaScript. Поначалу подумал, что это вообще ерунда — чего там, все регулярки-то уже написаны. Но в процессе выяснилось, что, оказывается, правила построения регулярных выражений в PHP и в JavaScript несколько отличаются. Но где наша не пропадала. Поломал немного башку (люблю я регулярки) и сделал-таки скрипт, выполняющий типографскую работу на стороне клиента.

Скрипт в конце заметки приложен для всех желающих скачать и воспользоваться. А далее — некоторые подробности его работы.

Опции фильтрации

 — замена (c) на ©;
 — замена (r) на ®;
 — замена (tm) на ™;
 — замена нескольких точек на многоточия;
 — замена +- на ±;
 — замена -> на →;
 — замена <- на ←;
 — исправление кавычек (использование кавычек типа «елочка»);
 — исправление дефисов на тире в тексте;
 — исправление дефисов на короткое тире в числовых диапазонах;
 — удаление пробелов между числом и знаком процента.

Отличия от модуля Typofilter

Скрипт был изначально сделан для интеграции в WYSIWYG-редакторы (BUEditor, CKEditor, TinyMCE) и поэтому не добавляется на страницу никаким модулем Друпала. В связи с чем у скрипта, в отличие от модуля Typofilter, отсутствуют настройки включения/выключения опций замены и добавления безопасных блоков (блоков текста, которые не будут подвергаться типографированию). Однако можно добавлять эти блоки прямо в код скрипта: место добавления отмечено комментарием.
В настоящий момент безопасным блоком считается текст, заключенный между тегами:
 — <safeblock></safeblock>
 — <pre></pre>
 — <style></style>
 — <script></script>
 — <code></code>
 — <!-- -->
 — <?php ?>
 — <drupal6></drupal6>
 — <php></php>
 — <cpp></cpp>
 — <object></object>
 — <javascript></javascript>
 — <qt></qt>

Кроме того, лично я не испытываю нужды в расстановке разных вложенных кавычек (елочки → лапки → елочки …), этой опции в скрипте тоже нет. Но если кому понадобится — могу добавить.

Интеграция в BUEditor

Интегрировать скрипт в BUEditor довольно просто.

1. Скопируйте скрипт typofilter.js на сайт, лучше всего в директорию %modules/bueditor/library, где %modules — директория, в которой вы храните дополнительные модули (напр. sites/all/modules/).

2. Пройдите на страницу admin/settings/bueditor/ и выберите редактор, к которому нужно добавить кнопку.

3. В секции Editor paths → Editor specific library files добавьте новую строчку, содержащую путь к файлу typofilter.js. Если вы копировали его в bueditor/library, это будет строчка %BUEDITOR/library/typofilter.js.

4. Нажмите «Сохранить конфигурацию».

5. В секции Import Buttons вставьте приведенный ниже код в поле Editor Code и нажмите «Импорт».

6. Нажмите «Сохранить конфигурацию».

7. Все, скрипт установлен, кнопка появилась, можно пользоваться.

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

Интеграция в CKEditor

1. Распакуйте архив и скопируйте директорию typofilter в директорию plugins установленного модуля ckeditor (напр. sites/all/modules/ckeditor/plugins).

2. В конец файла ckeditor.config.js (в корне директории установленного модуля ckeditor) добавьте строки:

5. Все, кнопка установлена.

Для редактора CKEditor скрипт Typofilter.js выполнен в виде плагина. Однако работа плагина ограничена типографированием выделенного в редакторе текста, а при нажатии на кнопку без выделения — ничего не происходит. Кроме того, ввиду серьезнейшей wysiwygнутости редактора, все теги при типографировании удаляются, так что рекомендуется сначала расставлять кавычки и тире, а уже потом — ссылки и разметку.

Интеграция в TinyMCE

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

1. Распакуйте архив и скопируйте директорию typofilter в директорию plugins по месту установки библиотеки tinymce. Путь должен быть примерно такой: sites/all/libraries/tinymce/jscripts/tiny_mce/plugins

2. К файлу tinymce.inc в директории wysiwyg/editors примените прилагающийся в архиве патч tinymce.inc.patch.

3. Включите кнопку Typofilter на странице админки модуля Wisywig, то есть поставьте галочку в настройках тех профилей, в которых вам нужна кнопка.

4. Все, кнопка готова.

Плагин для TinyMCE также работает только с выделенным текстом. Если при обработке в тексте попадаются теги (BBCode или просто) — после обработки они появятся в тексте. Чтобы их убрать, нажмите стандартную кнопку Cleanup messy code.

Сам я CKEditor и TinyMCE не использую и поэтому улучшать плагины в ближайшее время не намерен. Но если кто подредактирует и пришлет — буду признателен и стану прославлять этого человека на каждом углу. Все пожелания, предложения и модификации с радостью будут рассмотрены, пишите.