Расширяем функциональность TinyMCE — различия между версиями

Материал из Umicms
Перейти к:навигация, поиск
 
(не показаны 3 промежуточные версии 3 участников)
Строка 1: Строка 1:
[[category:Визуальный редактор]]
+
[[Категория:Вопросы и уроки разработки сайтов на UMI.CMS]]
[[category:Вопросы установки настройки и переноса]]
 
 
<p>
 
<p>
 
'''Задача''':
 
'''Задача''':
 
</p>
 
</p>
 
<p>
 
<p>
Добавить собственные элементы управления на панель инструментов TinyMCE и обработчики к ним.
+
Добавить собственный элемент управления на панель инструментов TinyMCE и обработчик к нему.
 
</p>
 
</p>
 
<p>
 
<p>
Строка 11: Строка 10:
 
</p>
 
</p>
 
<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>
 
</p>
 
<source lang="javascript">
 
<source lang="javascript">
Строка 42: Строка 41:
 
</p>
 
</p>
 
<p>
 
<p>
Теперь давайте добавим кастомную кнопку, по нажатию на которую выделенный текст будет окрашен в красный цвет:
+
Теперь давайте добавим кастомную кнопку, по нажатию на которую, выделенный текст будет окрашен в красный цвет:
 
</p>
 
</p>
 
<source lang="javascript">
 
<source lang="javascript">
Строка 49: Строка 48:
 
     e.addButton('red', {
 
     e.addButton('red', {
 
       title: 'Красный',
 
       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() {
 
       onclick: function() {
 
         e.formatter.register('redformat', {
 
         e.formatter.register('redformat', {

Текущая версия на 21:37, 4 июня 2013

Задача:

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

Решение:

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

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"
}

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

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"
}

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

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

window.mceCustomSettings = {
  setup: function(e) {
    e.addButton('red', {
      title: 'Красный',
      image: '/js/cms/wysiwyg/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"
}

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


Tinymce custom button.png

TinyMCE с кастомной кнопкой.

Так, с помощью API TinyMCE, фактически - можно сделать всё, что угодно. Документацию, а также примеры работы с API можно найти здесь.