Собираем
информацию
по крупицам

Web - разработка

Первичная настройка TinyMCE. Маленькие хитрости.
15-06-2010
02:19:08

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

 


К списку "Компьютерное"

Интересное на сайте


Гаджеты » Обзор Samsung GT-B2710: находка для любителей телефонов Siemens

Любите ли вы мобильники Siemens так, как люблю их я? Ах да, на улице 2011 год, и этот вопрос неактуален. Siemens уже шесть лет не производит телефоны...


Mplayer / Mencoder » Mplayer: как выбрать звуковую дорожку при просмотре фильма

Иногда попадаются файлы, в которых MPEG4-фильм записан таким образом, что перевод идёт дополнительным аудиопотоком, и по-умолчанию плейер его не видит...


Отладчик GDB » Отладка в gdb: как отловить обращение к переменной или к нужному свойству класса

Недавно мне пришлось отлаживать один крупный проект, который содержал большие куски говнокода. Необходимость в отладке возникла из-за того, что в одно...

RSS подписка

Подпишитесь на новости сайта по RSS


О, смотри-ка какое хорошее место. Дайте два!

Внимание!

На этом сайте разрабатывается программа MyTetra и её родственные проекты.

Доступны к просмотру следующие базы знаний:

База Xintrea (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18)

База Rarrugas (1, 2)

База Balas

База YellowRaven

База Yurons

База Lesnik757

База Shandor

База Sirrichar

 

Подробности на странице MyTetra Share.

 WebHamster.Ru
 Домик любопытного хомячка
Яндекс индекс цитирования
Почтовый ящик