Расширяем функциональность TinyMCE - История изменений

Mad grant в 21:37, 4 июня 2013

2013-06-04T21:37:02Z

Mad grant в 21:23, 4 июня 2013

2013-06-04T21:23:47Z

Alexei в 10:28, 13 мая 2013

2013-05-13T10:28:06Z

Kalexey в 15:59, 12 июня 2012

2012-06-12T15:59:03Z

Kalexey в 15:57, 12 июня 2012

2012-06-12T15:57:11Z

Kalexey: Новая страница: « category:Визуальный редактор category:Вопросы установки настройки и переноса
'''Задача''': <…»

2012-06-12T15:56:56Z

Новая страница: « category:Визуальный редактор category:Вопросы установки настройки и переноса '''Задача''': <…»

Новая страница

[[category:Визуальный редактор]]
[[category:Вопросы установки настройки и переноса]]


'''Задача''':


Добавить собственные элементы управления на панель инструментов TinyMCE и обработчики к ним.


'''Решение''':


Все настройки будем производить в файле "/js/tinymce/jscripts/tiny_mce/tinymce_custom.js", так как этот файл не будет перезаписан во время обновления системы. Файл содержит JavaScript-объект "window.mceCustomSettings" и изначально он выглядит так:

<source lang="javascript">
window.mceCustomSettings = {
convert_fonts_to_spans : true,
cleanup : true,

extended_valid_elements : "script[type=text/javascript|src|languge|lang],map[*],area[*],umi:*[*],input[*]",
content_css : "/css/cms/style.css",
theme_advanced_styles : "Table=my-table;Table Cell=my-table-cell;Table Row=my-table-row"
}
</source>

Для начала настроим стандартные кнопки на панели инструментов. Список кнопок будет таков: "Полужирный" (bold), "Наклонный" (italic), "Подчёркнутый" (underline), "Отменить" (undo), "Повторить" (redo), "Вырезать" (cut), "Копировать" (copy), "Вставить" (paste). Для этого нам нужно добавить параметр "toolbar_standart" с идентификаторами (они указаны в скобках) этих кнопок:

<source lang="javascript">
window.mceCustomSettings = {
toolbar_standart: "bold,italic,underline,|,undo,redo,|,cut,copy,paste",

convert_fonts_to_spans : true,
cleanup : true,

extended_valid_elements : "script[type=text/javascript|src|languge|lang],map[*],area[*],umi:*[*],input[*]",
content_css : "/css/cms/style.css",
theme_advanced_styles : "Table=my-table;Table Cell=my-table-cell;Table Row=my-table-row"
}
</source>

Символ "|" добавляет разделитель. Поскольку данные кнопки являются стандартными, нам не нужно "вешать" обработчик, по нажатию выполнится стандартная функция.


Теперь давайте добавим кастомную кнопку, по нажатию на которую выделенный текст будет окрашен в красный цвет:

<source lang="javascript">
window.mceCustomSettings = {
setup: function(e) {
e.addButton('red', {
title: 'Красный',
image: '/js/tinymce/jscripts/tiny_mce/themes/umi/img/red.gif',
onclick: function() {
e.formatter.register('redformat', {
inline: 'span',
styles: {color: 'red'}
});

e.formatter.apply('redformat');
}
});
},

toolbar_standart: "bold,italic,underline,|,undo,redo,|,cut,copy,paste,|,red",

convert_fonts_to_spans : true,
cleanup : true,

extended_valid_elements : "script[type=text/javascript|src|languge|lang],map[*],area[*],umi:*[*],input[*]",
content_css : "/css/cms/style.css",
theme_advanced_styles : "Table=my-table;Table Cell=my-table-cell;Table Row=my-table-row"
}
</source>

Мы используем метод "addButton" для добавления собственной кнопки. Данный метод принимает два параметра: идентификатор и настройки кнопки. В настройках мы задаём текст всплывающей подсказки, изображение для кнопки и вещаем обработчик на событие "click". В обработчике регистрируем новый формат и затем применяем его. Место размещения кнопки на панели указываем с помощью заданного нами идентификатора в методе "addButton" (в нашем случае - это "red").

 
<table align="center">
<tr>
<td style="border: 1px solid black; padding: 5px;">
[[Файл:tinymce_custom_button.png]]
</td>
</tr>
<tr>
<td style="font-color: darkblue; font-weight: bold; text-align: center;">
TinyMCE с кастомной кнопкой.
</td>
</tr>
</table>

Так, с помощью API TinyMCE, фактически - можно сделать всё, что угодно. Документацию, а также примеры работы с API можно найти [http://www.tinymce.com/wiki.php здесь].

@@ Строка 5: / Строка 5: @@
 </p>
 <p>
-Добавить собственные элементы управления на панель инструментов TinyMCE и обработчики к ним.
+Добавить собственный элемент управления на панель инструментов TinyMCE и обработчик к нему.
 </p>
 <p>
@@ Строка 42: / Строка 42: @@
 </p>
 <p>
-Теперь давайте добавим кастомную кнопку, по нажатию на которую выделенный текст будет окрашен в красный цвет:
+Теперь давайте добавим кастомную кнопку, по нажатию на которую, выделенный текст будет окрашен в красный цвет:
 </p>
 <source lang="javascript">

@@ Строка 1: / Строка 1: @@
- [[category:Визуальный редактор]]
+[[Категория:Вопросы и уроки разработки сайтов на UMI.CMS]]
 <p>
 '''Задача''':

@@ Строка 11: / Строка 11: @@
 </p>
 <p>
-Все настройки будем производить в файле "/js/tinymce/jscripts/tiny_mce/tinymce_custom.js", так как этот файл не будет перезаписан во время обновления системы. Файл содержит JavaScript-объект "window.mceCustomSettings" и изначально он выглядит так:
+Все настройки будем производить в файле "/js/cms/wysiwyg/tinymce/jscripts/tiny_mce/tinymce_custom.js", так как этот файл не будет перезаписан во время обновления системы. Файл содержит JavaScript-объект "window.mceCustomSettings" и изначально он выглядит так:
 </p>
 <source lang="javascript">
@@ Строка 49: / Строка 49: @@
      e.addButton('red', {
        title: 'Красный',
-       image: '/js/tinymce/jscripts/tiny_mce/themes/umi/img/red.gif',
+       image: '/js/cms/wysiwyg/tinymce/jscripts/tiny_mce/themes/umi/img/red.gif',
        onclick: function() {
          e.formatter.register('redformat', {