Разобъем настройку TinyMCE на несколько шагов. Обычно нужно сделать следующее:
- Добиться, чтобы текст внутри редактора TinyMCE отбражался согласно заданному набору CSS-правил
- Добиться, чтобы курсор при нажатии Enter перепрыгивал вниз на высоту строки
- Добиться, чтобы текст, написанный в TinyMCE, выглядел на сайте так же, как и в редакторе
- Разобраться, как использовать в TinyMCE CSS-классы оформления, используемые на сайте
Итак, по-порядку.
В первую очередь надо добиться, чтобы текст внутри редактора TinyMCE выглядел так, как нам надо. То есть, нужно настроить CSS-файл, в котором прописаны CSS-правила отображения текста в TinyMCE.
Существует мнение, что настройка форматирования текста, для самой популярной темы advanced, происходит в файле /themes/advanced/skins/default/content.css. Это не так. На деле, обращения к этому файлу, без дополнительной настройки, TinyMCE не делает.
Чтобы настроить внешний вид текста в области редактирования TinyMCE, надо сделать следующее:
1. Скопировать файл /themes/advanced/skins/default/content.css в каталог, где лежат css-файлы сайта или CMS. Я обычно использую каталог /css (относительно корня сайта).
2. Переименовать скопированный файл с /css/content.css на /css/tinymce.css, ибо через некоторое время можно забыть, откуда появился и для чего нужен файл с названием "content.css".
3. В настройках TinyMCE (т.е. в настроечном массиве tinyMCE.init) надо добавить опцию:
...
content_css: "/css/tinymce.css",
...
4. Надо убедиться, что данный файл влияет на TinyMCE. Для этого надо в первой строчке заменить размер шрифта font-size с 10px на 12px. Вот так:
body, td, pre {color:#000; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; margin:8px;}
Данную настройку имеет смысл так и оставить, ибо размер 10px все считают слишком мелким.
5. Обновляем страницу. Для того, чтобы увидеть изменения оформления, в некоторых браузерах, особенно это касается Opera, надо обязательно очистить кеш, чтобы перегрузился css-файл.
* * *
Далее нам необходимо сделать так, чтобы курсор при нажатии Enter перепрыгивал на следущую строчку, а не делал большой отступ, показывая создание нового параграфа. Как показывает практика, появление большого отступа при нажатии Enter в TinyMCE вызывает ступор у многих пользователей. Связано это с тем, что в "обычных" редакторах типа MS Word, межстрочный интервал и интервал между параграфами по-умолчанию равны. А в TinyMCE, по умолчанию, интервал между параграфами больше, чем межстрочный.
Многие пытаются решить эту проблему путем прописывания в настроечный массив tinyMCE.init следующей настройки:
force_br_newlines : true
Этого делать ненадо! Во-первых, TinyMCE глючит при работе со строками, разделенными тегом <br>. Об этом знают разработчики TinyMCE, но напрямую не говорят, а настоятельно не рекомендуют пользоваться такой настройкой. А во-вторых, наша задача совсем в другом - надо сделать одинаковым межстрочный интервал и интервал между параграфами. Тогда пользователю будет удобно работать.
Поэтому, в созданный нами файл /css/tinymce.css нужно добавляем строку:
p, span { margin: 0; padding: 0; }
С помощью этой строки новый параграф не будет отделяться большим отступом, а будет внешне выглядеть как новая строка.
* * *
Теперь нужно сделать так, чтобы текст, созданный в TinyMCE, отображался на страницах сайта именно в том виде, в котором он виден в области редактирования TinyMCE.
Если мы просто подключим файл /css/tinymce.css к коду страницы сайта, то ничего хорошего из этого не выйдет. А не выйдет потому, что правила, прописанные в /css/tinymce.css, написаны в "явном виде" для всех основных тегов. Таким образом, простое подключение /css/tinymce.css к HTML-коду страницы сайта, может нарушить верстку страницы.
Я долго разбирался, каким же образом можно подключить CSS-правила, используемые в TinyMCE так, чтобы они влияли только на определенную область HTML-кода (то есть на ту облась, в которой находится текст, созданный с помощью TinyMCE). В результате подошел только один метод. Немного неудобный, но зато работающий железобетонно.
Нам нужно сделать следующее:
1. Скопировать файл /css/tinymce.css, дав ему имя /css/site_tinymce.css. В этом новом файле надо перед каждым CSS-правилом прописать строку ".tinymce ". Например, имеем файл /css/tinymce.css с содержимым:
body, td, pre {color:#000; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; margin:8px;}
body {background:#FFF;}
p, span { margin: 0; padding: 0; }
body.mceForceColors {background:#FFF; color:#000;}
h1 {font-size: 2em}
.mceItemTable, .mceItemTable td, .mceItemTable th, .mceItemTable caption, .mceItemVisualAid {border: 1px dashed #BBB;}
a.mceItemAnchor {display:inline-block; width:11px !important; height:11px !important; background:url(img/items.gif) no-repeat 0 0;}
td.mceSelected, th.mceSelected {background-color:#3399ff !important}
img {border:0;}
table {cursor:default}
table td, table th {cursor:text}
/* IE */
* html body {
scrollbar-3dlight-color:#F0F0EE;
scrollbar-arrow-color:#676662;
}
img:-moz-broken {-moz-force-broken-image-icon:1; width:24px; height:24px}
font[face=mceinline] {font-family:inherit !important}
Тогда содержимое файла /css/site_tinymce.css должно быть:
.tinymce body, td, pre {color:#000; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; margin:8px;}
.tinymce body {background:#FFF;}
.tinymce p, span { margin: 0; padding: 0; }
.tinymce body.mceForceColors {background:#FFF; color:#000;}
.tinymce h1 {font-size: 2em}
.tinymce .mceItemTable, .mceItemTable td, .mceItemTable th, .mceItemTable caption, .mceItemVisualAid {border: 1px dashed #BBB;}
.tinymce a.mceItemAnchor {display:inline-block; width:11px !important; height:11px !important; background:url(img/items.gif) no-repeat 0 0;}
.tinymce td.mceSelected, th.mceSelected {background-color:#3399ff !important}
.tinymce img {border:0;}
.tinymce table {cursor:default}
.tinymce table td, table th {cursor:text}
/* IE */
.tinymce * html body {
scrollbar-3dlight-color:#F0F0EE;
scrollbar-arrow-color:#676662;
}
.tinymce img:-moz-broken {-moz-force-broken-image-icon:1; width:24px; height:24px}
.tinymce font[face=mceinline] {font-family:inherit !important}
2. Подключаем файл /css/site_tinymce.css к HTML-коду страницы сайта:
<link rel="stylesheet" type="text/css" href="/css/tinymce_site.css"/>
3. Ту область, где должен выводиться текст, созданный в TinyMCE, заключаем в тег div, с указанием класса tinymce:
<div class="tinymce">
...
</div>
Таким образом, мы создали CSS-файл правил, которые применяются только к элементам, расположенным внутри тега с классом "tinymce". Посему, эти правила не будут нарушать верстку сайта. А чтобы эти правила применялись к тексту, созданному в TinyMCE, мы заключаем этот текст в тег <div class="tinymce">.
Почему такой подход неудобен? Да потому, что теперь нужно постоянно помнить, что если что-то перенастроили в файле /css/tinymce.css, тоже самое нужно сделать и в файле /css/site_tinymce.css.
А почему бы не обойтись одним файлом? Например, можно было бы иметь один CSS-файл (с содержимым /css/site_tinymce.css), а вставку редактора TinyMCE заключить бы в тег <div class="tinymce">. Тогда б и текст внутри редактора, и текст на страницах сайта управлялось бы одним CSS-файлом. Почему бы так не сделать?
Отвечаю. На самом деле, CSS-файл, подключаемый через опцию content_css - не настоящий css-файл. Он нигде в TinyMCE не подключается в том виде, в котором считан. Вместо этого он парсится ява-скриптом, и свойства отображения текста применяются динамически. Эксперименты и изучение кода TinyMCE (v. 3.3.6 от 20.05.2010) показали ограничения, которые накладываются на css-файл, подключаемый через опцию content_css. Вот эти ограничения:
1. В файле нельзя использовать сложные селекторы. Селекторы должны быть написаны для тегов в явном виде, либо простыми правилами. Вследствие этого, не работает идея прописывания строки ".tinymce " перед каждым селектором, и обрамление <textarea> с TinyMCE в тег с классом "tinymce".
2. В файле нельзя использовать инклуд других CSS-файлов. Строки следущего вида:
@import "/css/additional.css"
нарушают работу css-парсера, встроенного в TinyMCE, и текст начинает отображаться совершенно некорректно.
Вследствие этих ограничений, я пока не вижу другого решения, отличного от идеи держать два css-файла: один для TinyMCE, второй для страниц сайта.
* * *
Остался последний пункт - разобраться, как использовать в TinyMCE CSS-классы оформления, используемые на сайте. Здесь пришлось столкнуться с теми же проблемами, что и в предыдущей задаче, но к счатью, решение оказалось достаточно простым.
Итак, у нас есть CSS-файл, в котором прописаны CSS-правила оформления, используемые на страницах сайта. Пусть это будет файл /css/site.css. Пусть, к примеру в нем есть три вот таких правила:
.font_big_head
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14pt;
font-weight: bold;
color: black;
}
.font_mini
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 8pt;
font-weight: normal;
color: gray;
}
.font_block_code
{
font-family: 'Courier New', Courier, monospace;
font-size: 10pt;
font-style: normal;
line-height: normal;
font-weight: normal;
margin-left: 20px;
margin-right: 20px;
padding: 3px;
background-color: #EFEFF5;
}
Мы хотим, чтобы в TinyMCE была возможность форматирования текста именно этими правилами. Внешне это должно выглядеть так - в панеле TinyMCE должен быть выпадающий список, в ктором будет три пункта:
- Большой заголовок
- Мелкий текст
- Код
При выборе соответсвующего пункта, текст должен форматироваться правилом ".font_big_head", ".font_mini" или ".font_block_code".
Сделать такую функциональность нетрудно. Нужно в настроечном массиве tinyMCE.init добавить элемент styleselect в какую-нибудь линейку кнопок, например в theme_advanced_buttons2. Вот так это может выглядеть:
...
theme_advanced_buttons2 : "fontselect, fontsizeselect, styleselect",
...
Затем надо указать, какой выпадающий список будет показывать элемент styleselect. Для этого в настроечный массив tinyMCE.init нужно добавить следующую опцию:
...
style_formats : [
{title : 'Большой заголовок', block : 'p', classes : 'font_big_head' },
{title : 'Мелкий текст', inline : 'span', classes : 'font_mini'},
{title : 'Код', block : 'p', classes : 'font_block_code'}
],
...
Если теперь в редакторе выделить кусок текста, и нажать пункт "Большой заголовок", этот текст будет заключен в тег <p class="font_big_head">. А если выбрать пункт "Мелкий текст", то текст будет заключен в тег <span class="font_mini"> и т.д.
Однако, несмотря на правильно генерируемый HTML-код, в окне редактирования TinyMCE мы не увидим применения данного форматирования. Почему? Да потому, что CSS-файл /css/site.css с нашими правилами неизвестен TinyMCE.
Значит, нам надо подключить в TinyMCE два файла - /css/tinymce.css и /css/site.css. Однако, изучая документацию, мы видим, что с помощью опции content_css подключить-то можно только один CSS-файл. К тому же, как мы уже выяснили, подключить один CSS-файл внутри другого CSS-файла так же не представляется возможным.
Я даже попробовал прописать в массив tinyMCE.init две опции content_css:
...
content_css: "/css/tinymce.css",
content_css: "/css/site.css",
...
но как и ожидалось, ни к чему хорошему это не привело - считывается только первый файл.
Снова пришлось лезть в исходники TinyMCE, и что же я там увидел? Оказывается, возможность добавить несколько css-файлов есть, только об этом в документации не написано. Нужно просто перечислить подключаемые файлы, разделяя их имена пробелом/запятыми. Вот так:
...
content_css: "/css/tinymce.css, /css/site.css",
...
После этого действия, применение стилей, описанных в /css/site.css, становится сразу видно в редакторе TinyMCE.
Нужно сразу оговорить один важный момент.
Помните, что мы добавляли правило "p, span { margin: 0; padding: 0; }" в файл /css/tinymce.css? Так вот, нулевые отступы, заданные в этом правиле, будут "перевешивать" отступы, заданные в правиле ".font_block_code". Это происходит из-за того. что правило, с тегом в селекторе (p, span), "весит" больше, чем правило, заданное только с использованием имени класса (.font_block_code).
Поэтому, нужно взять за привило, что селекторы CSS-правил, используемые и на страницах сайта, и в редакторе TinyMCE, должны быть прописаны с использованием тегов. То есть, вместо вышеприведенных правил ".font_big_head", ".font_mini" и ".font_block_code", правильно будет писать такие правила:
p.font_big_head
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14pt;
font-weight: bold;
color: black;
}
span.font_mini
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 8pt;
font-weight: normal;
color: gray;
}
p.font_block_code
{
font-family: 'Courier New', Courier, monospace;
font-size: 10pt;
font-style: normal;
line-height: normal;
font-weight: normal;
margin-left: 20px;
margin-right: 20px;
padding: 3px;
background-color: #EFEFF5;
}
Надеюсь, эта статья поможет тем, кто из всего многообразия онлайновых HTML-редакторов (http://www.geniisoft.com/showcase.nsf/WebEditors) выбрал наиболее кросс-браузерный и конфигурабельный редактор TinyMCE.