Настройка используемых стилей
Каждая тема имеет свой файл editor_content.css. Именно стили из этого файла применяются к контенту внутри окна редактора. У нас на сайте имется, естественно, своя огромная таблица стилей в нескольких сайтах. Как сообщить TinyMCE, что именно её надо использовать?
Очень просто - надо в Конфигурации сайта указать Путь к CSS-файлу:
Но здесь есть важный нюанс. В стилях нашего сайта для body записан темный цвет. Потом body перекрывается различными слоями. А редакторы (и TinyMCE, и FCKeditor) отображают внутри себя редактируемый контент на фоне body. Здесь нашлось простое решение. Главная таблица стилей нашего сайта assets/templates/yaml/site.css полностью состоит из включений других файлов:
@charset "utf-8";
@import url(fonts.css);
@import url(color.css);
....
@import url(lists.css);
Рядом с ней мы кладем другую таблицу assets/templates/yaml/site_tiny.css и именно её указываем в параметре Путь к CSS-файлу. В этом файле, после загрузки всех включаемых, мы просто переопределяем цвет для body:
@charset "utf-8";
@import url(fonts.css);
@import url(color.css);
...
@import url(lists.css);
body {background: #FFF;text-align: left;}
Вот теперь в нашем редакторе правильно отображается и фон, и все остальные элементы.
Настройка списка стилей
Настройку списка Стили можно выполнить в конфигурации сайта, заполнив строку Селекторы CSS. У нас она имеет такой вид:
Это самый правильный путь. Как ни странно, работает.
Кстати, оказалось, что именно этот список появляется и при редактировании свойств изображения в списке Класс на вкладке Визуализация:
Это уже просто замечательно! Почему-то сначала мы пытались сделать иначе - включили в editor_content.css свои классы с пустыми описаниями. Вот так:
.user {}
...
.quest {}
.answ {}
.my {}
В результате имена этих классов появились в списке Стили.Оставим упоминание об этом приеме на всякий случай.
Настройки списка Формат
Кроме списка Стили (который, возможно, лучше бы назвать Классы), есть еще и список Формат. Применяя класс мы изменяем оформление каких-то элементов. Применяя Формат мы используем логические элементы форматирования. Это теги HTML. Список тегов, попадающих в список Формат зашит в файлах
а) tinimce.functions.php - определение $blockFormats = "p,h1,h2,h3,h4,h5,h6,div,blockquote,code,pre,address".
б) в языковых файлах темы en.js и ru.js - там записаны отображаемые названия перечисленных тегов, например theme_h1 : 'h1: Заголовок 1' для тега h1.
в) в editor_template_src.js - это шаблон редактора для темы.
И еще в куче других JS.
На наш взгляд список $blockFormats примерно нормальный. Единственно, что мы сделали - изменили русские наименования, подставив название тега - вместо Абзац сделали p:Абзац и т.д. Однако нам не нужны теги blockquote и code (для выделения кода у нас есть класс). Оказалось, что ненужные форматы можно просто удалить в конфигурации плагина. Для этого нужно удалить ненужные Значения из параметра Block Formats. Свои теги, сверх указанных в списке $blockFormats добавить без глубокого влезания в код, нельзя. Да и не нужно.
Хотелось бы только, чтобы в списках названия стилей и форматов сами отображались бы в нашем стиле. Вот так отображает список TinyMCE 3.2.0.1:
Там в списке используется таблица стилей /assets/plugins/tinymce3201/jscripts/tiny_mce/themes/advanced/skins/default/ui.css.
Кстати, выяснили мы это с помощью дополнения к Firefox Web Developer и инструмента CSS - View Style Infomation, упоминавшемся в заметке о браузерах.
Но нам этого мало. Хотелось бы, чтобы вообще "чисто конкретно" по нашенски было. Как в FCKeditor:
Попытались вписать в конец ui.css строку @import url('../../../../../../../../assets/templates/yaml/site_tiny.css'), но результата не получили. И не могли получить, так как в TinyMCE используются классы, отсутствующие в наших таблицах:
.defaultSkin .mce_formatPreview a {font-size:10px}
.defaultSkin .mce_p span.mceText {}
.defaultSkin .mce_address span.mceText {font-style:italic}
.defaultSkin .mce_pre span.mceText {font-family:monospace}
.defaultSkin .mce_h1 span.mceText {font-weight:bolder; font-size: 2em}
.defaultSkin .mce_h2 span.mceText {font-weight:bolder; font-size: 1.5em}
.defaultSkin .mce_h3 span.mceText {font-weight:bolder; font-size: 1.17em}
.defaultSkin .mce_h4 span.mceText {font-weight:bolder; font-size: 1em}
.defaultSkin .mce_h5 span.mceText {font-weight:bolder; font-size: .83em}
.defaultSkin .mce_h6 span.mceText {font-weight:bolder; font-size: .75em}
Мы могли бы и их переписать или, еще лучше, переопределить в своем site_tiny.css, но решили этого не делать - "не догнали, так согрелись".
У нас, конечно, более древняя версия TinyMCE - 2.3.1., там еще не было "шкурок". Ну и успокоимся, но запомним на будущее.
Обратите внимание - в TinyMCE имеется ряд JS-файлов с суффиксом _src в имени, например editor_template_src.js, а рядом всегда имеется файл без суффикса в имени, например editor_template.js. Это сжатые для уменьшения размера (они же через сеть летят клиенту) файлы, в которых выброшены комментарии и лишние пробелы. Мы можем редактировать editor_template_src.js, а читаться должен editor_template.js. Для сжатия Javascript в Сети можно найти несколько (в том числе он-лайновых) утилит. Для TinyMCE в сборке для разработчика, прилагается специальный инструментарий - JSTrim.exe с файлом конфигурации JSTrim.config в формате XML. В комплект разработчика также входят дополнительные JS-файлы.
Насколько мы поняли, редактирование кодов обычными пользователями MODx вообще не должно делаться. Все настройки - только через свойства. А JSTrim.exe, используя файл конфигурации (там перечень чего сжимать), вообще собирает единственный tiny_mce.js, вот он-то и работает. Но может быть это наши заведомо ложные измышления.
Однако, после того, как мы убедились, что необходимые настройки можно сделать и без правки исходников, сведения об сжатии скриптов оставим только в виде "узелка на память".
Написать комментарий