Разобъем настройку 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.