Жиза

Редактор TinyMCE имеет множество директив настройки, благодаря которым можно гибко управлять работой редактора. К сожалению, некоторые молодые вебмастера отказываются от использования TinyMCE из-за неумения его настроить, а дефолтные настройки устраивают далеко не всех.

Установка редактора TinyMCE описывается в статье "Установка редактора TinyMCE", а здесь разберемся с директивами конфигурации редактора. Все директивы конфигурации редактора TinyMCE описаны в документации на домашнем сайте TinyMCE. Здесь разберем некоторые.

Управление поведением редактора в отношении ссылок

• convert_urls - по умолчанию true. Все URL будут конвертироваться в относительные. Действие зависит от следующей директивы.
• relative_urls - по умолчанию true. Все URL будут приведены к домашнему домену.
• remove_script_host - по умолчанию true. Если директива включена, то из урла будут удалены название протокола и хост. Если директива установлена в false, то урлы будут храниться в полном формате: "http://www.example.com/somedir/somefile.htm" вместо: "/ somedir / somefile.htm". Эта директива работает только если relative_urls установлено в false.
• document_base_url - значением по умолчанию является каталог текущего документа. Эта директива определяет базовый URL для всех относительных URL-адресов в документе. Если указывается какое-то значение, то оно должно указать на каталог (не документ) и должно заканчиваться символом "/".

Управление поведением редактора в отношении html тэгов

Директив в этом разделе весьма много и все перечислять смысла нет. Приведу несколько наиболее критичных.

• valid_elements - эта директива определяет, какие html тэги остануться нетронутыми после сохранения документа. Если мы хотим, чтобы все тэги и все атрибуты тэгов не изменялись и не удалялись, указываем *[*]. Если хотим сохранять только некоторые тэги или же заменять одни тэги другими, то перечисляем нужное через запятую "a, b, em, ul, li". Запись "strong/b" разрешает тэг "strong" и заставляет редактор принудительно заменять тег "b" тэгом "strong". Запись "a[href|target=_blank]" разрешает тэг "a" с атрибутом "href" и устанавливает атрибут "target" в значение "_blank". Например: valid_elements : "a[href|target=_blank],strong/b,div[align],br".
  
• extended_valid_elements - действие директивы аналогично действию valid_elements с той разницей, что она добавляет тэги к существующему списку. Если в этой директиве встретится тэг уже описанный в valid_elements, он будет переопределен. В настройках лучше использовать именно эту директиву.
  
• invalid_elements - директива прямо противоположная предыдущей. В ней указываются запрещенные тэги, которые будут удаляться редактором из текста. Формат директивы такой же как и у valid_elements.
• cleanup - очистка кода при сохранении документа. Если эта директива установлена в true, то из текста удаляются служебные атрибуты редактора, как то: mce_style, mce_href, mce_src и другие. В этом случае в директиве valid_elements необходимо прописать теги и атрибуты, которые не должны удаляться редактором (такие как noindex, iframe, strong, object, em, embed).

Другие директивы

• gecko_spellcheck - значение по умолчанию false. С помощью этой директивы управляется логика проверки орфографии Gecko/Firefox. Значение true включает внутреннюю проверку орфографии.
• language - явно указывает язык документов. В нашем случае логично указать: "ru".
• inline_styles - по умолчанию true. При установки этой директивы в true, редактор осуществляет преобразование некоторых атрибутов тэгов в css нотации, что приближает кодировку к XHTML стандартам.
• entity_encoding - способ кодирования специальных символов.
  Возможные значения:
  
  • named - спецсимволы будут кодироваться символьной нотацией, например неразрывный пробел закодируется как  
  • numeric - спецсимволы будут кодироваться числовой нотацией, например неразрывный пробел закодируется как  
  • raw - спецсимволы кодироваться не будут за исключением & <> " (&amp; &lt; &gt; &quot;).
• content_css - прикрепляет пользовательский стиль.
• width - директива явно определяет ширину окна редактора. Размерность указывается в пикселях, указывать ее явно не надо.
• height - директива явно определяет высоту окна редактора. Размерность указывается в пикселях, указывать ее явно не надо.
• mode -директива определяет способ подключения редактора к тэгу textarea.
  Возможные варианты:
  
  • textareas - редактор подключается ко всем тэгам textarea на странице;
    
  • specific_textareas - подключает редактор к textarea, который отмечен классом указанным в директиве editor_selector;
  • exact подключает редактор к textarea или div, который отмечен id указанным в директиве elements;
  • none - не подключать редактор. Подключение осуществляется функцией tinyMCE.execCommand().
• skin - определяет "шкурку" вашего редактора (оформление). Сейчас доступно две шкурки: default" и "o2k7".
• theme - директива определяет "тему" (а по сути набор кнопок) редактора. Имеется две встроенных темы: simple и advanced. simple ставит минимальный набор кнопок и возможностей. advanced позволяет управлять набором кнопок. Темы можно создавать самостоятельно.
• plugins - определяет список подключаемых плугинов.
• theme_advanced_toolbar_location - указывает в каком месте будут находиться панели редактора. Возможные значения: "top" или "bottom".
• theme_advanced_statusbar_location указывает в каком месте будут находиться панель статуса. Возможные значения: "top" или "bottom".
• theme_advanced_buttons1 - определяет набор кнопок в панеле (указана цифрой, обычно от 1 до 4) редактора.

Инициализация редактора TinyMCE может быть такой

<!-- TinyMCE -->
<script type="text/javascript" src="/путь к редактору/tiny_mce/tiny_mce.js">

</script><script type="text/javascript">
tinyMCE.init({
// General options
mode : "textareas",
theme : "advanced",
language : "ru",
inline_styles: true,
convert_urls : false,
relative_urls : false,
remove_script_host : false,
cleanup: true,
extended_valid_elements:"noindex, strong/b, em/i, sup, sub, ul, ol, li, div[class | id | style | name | title | align | width | height], span[class | id | style | name | title], hr[class | id | style | name | title | align | width | height], img[class | id | style | name | title | src | align | alt | hspace | vspace | width | height | border=0], a[class | id | style | name | title | src | href | rel | target | ], iframe[class | id | style | name | title | src | align | width | height | marginwidth | marginheight | scrolling | frameborder | border | bordercolor], embed[class | id | style | name | title | align | width | height | hspace | vspace | type | pluginspage | src], object[class | id | style | name | title | align | width | height | hspace | vspace | type | classid | code | codebase | codetype | data]",

plugins : "pagebreak, style, layer, table, save, advhr, advimage, advlink, emotions, iespell, inlinepopups, insertdatetime, preview, media, searchreplace, print, contextmenu, paste, directionality, fullscreen, noneditable, visualchars, nonbreaking, xhtmlxtras, template, wordcount, advlist, autosave",

// Theme options
theme_advanced_buttons1 : "undo, redo, |, bold, italic, underline, strikethrough, |, justifyleft, justifycenter, justifyright, justifyfull, styleselect, formatselect, fontselect, fontsizeselect, sub, sup, |, forecolor, backcolor",
theme_advanced_buttons2 : "cut, copy, paste, pastetext, pasteword, removeformat, cleanup, |, search, replace, |, bullist, numlist, |, outdent, indent, blockquote, |, link, unlink, image, |, insertdate, inserttime, hr, |, charmap, emotions, iespell",
theme_advanced_buttons3 : "tablecontrols, |, visualaid",
theme_advanced_buttons4 : "styleprops, |, cite, abbr, acronym, del, ins, |, visualchars, nonbreaking, |, print, preview, |, fullscreen",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : true,

});
</script>
<!-- /TinyMCE -->

В каком месте надо вставлять директивы конфигурации, и как устанавливать редактор TinyMCE читайте в статье "Установка редактора TinyMCE".