Вебстудия Андрея Москалюкова :: ООО "Интернет-информация-бизнес"

Информационный центр

Заказать услугу

Рейтинг:  1 / 5

Звезда активнаЗвезда не активнаЗвезда не активнаЗвезда не активнаЗвезда не активна
 

Настройка редактора TinyMCE

Редактор 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".

Комментарии  

0 # RE: Настройка редактора TinyMCEСаша 22.09.2016 09:59
Спасибо большое. Выручила статья.
Ответить | Ответить с цитатой | Цитировать
0 # RE: Настройка редактора TinyMCEСергей 21.09.2014 23:38
Здравствуйте! В один момент перестал вставляться флеш через редактор. Вместо ролика пустое место. Ранее установленные ролики играют, но если страницу с роликом открыть в редакторе и сохранить, даже ничего не меняя, то ролик пропадает, остаётся пустое место. В чём может быть причина?
Ответить | Ответить с цитатой | Цитировать
+3 # Настройка редактора TinyMCEИрина 08.03.2014 14:09
Андрей, добрый день! Скажите, пожалуйста, где находятся функции инициализации редактора TinyMCE? Хочу проставить директивы и не знаю куда? Я новичок в этом.
Ответить | Ответить с цитатой | Цитировать
0 # опции после инициализацииfedor 24.02.2014 23:49
Интересно, возможно ли менять опции после инициализации?
пробую как-то так для нескольких редакторов
for(var index in tinyMCE.editors ) {
tinyMCE.edit ors[index].sett ings.valid_elem ents = "noindex,..,.. etc";
tinyMCE.editors[index].execCommand('mceCleanup');
}
вроде бы объекты меняются, но чистится со старыми настройками, заданными при инициализации
Ответить | Ответить с цитатой | Цитировать
+2 # Ссылки в TinyMCEАлександр 09.11.2013 08:39
Уважаемые авторы. Не поможете ли?
Я на своей странице расставил якоря и настроил на них ссылки. Всё работает. Но...

Когда эту же страницу я корректирую, то после сохранения большинство ссылок на якоря уже не работают. Они как бы "сбиваются" и указывают на совершенно разные страницы моего сайта (в том числе и административны е).

Мне приходится после корректировки страницы ещё раз обновить все ссылки (на якоря). Это очень хлопотно!!

Буду благодарен, если поможете...
Ответить | Ответить с цитатой | Цитировать
0 # RE: Ссылки в TinyMCEИгорь 09.11.2013 11:00
Цитирую Александр:
Уважаемые авторы. Не поможете ли?
Я на своей странице расставил якоря и настроил на них ссылки. Всё работает. Но...

Ссылку на сайт пожалуйста
Ответить | Ответить с цитатой | Цитировать
-1 # редакторПавел 10.10.2013 11:04
вверху есть окно, с кнопками, и его можно располагать в 2 местах 'top' 'button', как добавить другое место, например left и right искал, как понял там разметка табличная, и она сразу с джавой переплетена, это ппц криво? или это я ппц тормоз?) не знаю как эту таблицу поменять. убрать тр
Ответить | Ответить с цитатой | Цитировать
+2 # Анатолий 16.12.2012 00:31
А в каком файле директивы эти прописывать? :cry:
Ответить | Ответить с цитатой | Цитировать
0 # RE: Настройка редактора TinyMCEzardoz 21.08.2012 23:33
language : "ru",

В каталоге /lang должен быть ru.js иначе будет глючное поведение (а в IE8+ вообще не будет страница отображаться). Я напарился, пока доперло глянуть проверить.
Ответить | Ответить с цитатой | Цитировать
+1 # stcrash 03.05.2012 15:40
Для указания ширины напишите width: 1000, но при этом параметр theme_advanced_ resizing : false должен быть false
Ответить | Ответить с цитатой | Цитировать
+2 # Игорь 27.11.2011 20:52
Спасибо!
Чето нехочет через указание размера - пришлось добавить 5 строку для кнопок и перенести туда с длиных строк
Ответить | Ответить с цитатой | Цитировать
-1 # RE: Настройка редактора TinyMCEАндрей Москалюков 27.11.2011 20:46
Должно быть width:"400",
Еще можно попробовать использовать theme_advanced_ source_editor_h eight : "высота",
theme_advanced_source_editor_width : "ширина",
Первый для указания высоты и второй для ширины.
Ответить | Ответить с цитатой | Цитировать
0 # Игорь 27.11.2011 20:24
Я итак весь написал (тот что выше) т вначале после language : "ru", такое width:"400px"

Тоесть так:


tinyMCE.init({
mode:"textareas ",
theme:"advanced ",
language:"ru",
width:"400px",
Ответить | Ответить с цитатой | Цитировать
-3 # Игорь 27.11.2011 20:16
Вставил после language : "ru", такое width:"400px", и не меняется
Ответить | Ответить с цитатой | Цитировать
0 # Андрей Москалюков 27.11.2011 20:18
Напишите код полностью
Ответить | Ответить с цитатой | Цитировать
+1 # Игорь 27.11.2011 19:41
[цитата]width - директива явно определяет ширину окна редактора. Размерность указывается в пикселях, указывать ее явно не надо.[/цитата]

А где это поменять ширину можно?Вставил весь это тод и все кнопки появились но изменилась ширина окн
Ответить | Ответить с цитатой | Цитировать
-3 # Андрей Москалюков 27.11.2011 20:14
Все директивы вставляются в функции инициализации редактора
Ответить | Ответить с цитатой | Цитировать

Добавить комментарий


Защитный код
Обновить

 

Новые комментарии