Плагин "Spoiler" для TinyMCE — различия между версиями

Материал из Umicms
Перейти к:навигация, поиск
Строка 11: Строка 11:
 
</p>
 
</p>
 
<p>
 
<p>
Для решения задачи был написан небольшой плагин TinyMCE. Плагин можно скачать [http://wiki.umisoft.ru/images/9/94/Spoiler.zip отсюда].
+
Для решения задачи был написан небольшой плагин "UmiSpoiler" для TinyMCE. Плагин можно скачать [http://wiki.umisoft.ru/images/4/4a/Umispoiler.zip отсюда].
 
</p>
 
</p>
 
<p>
 
<p>
Строка 27: Строка 27:
 
     + "advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,"
 
     + "advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,"
 
     + "print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,"
 
     + "print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,"
     + "nonbreaking,xhtmlxtras,template,imagemanager,spoiler,",
+
     + "nonbreaking,xhtmlxtras,template,imagemanager,umispoiler,",
  
 
   toolbar_standart : "imagemanager,fontsettings,tablesettings,|,"
 
   toolbar_standart : "imagemanager,fontsettings,tablesettings,|,"
Строка 33: Строка 33:
 
     + "undo,redo,|,"
 
     + "undo,redo,|,"
 
     + "link,unlink,anchor,image,media,|,"
 
     + "link,unlink,anchor,image,media,|,"
     + "charmap,code,|,spoiler,",
+
     + "charmap,code,|,umispoiler,",
 
   
 
   
 
   extended_valid_elements : "script[type=text/javascript|src|languge|lang],map[*],area[*],umi:*[*],input[*]",
 
   extended_valid_elements : "script[type=text/javascript|src|languge|lang],map[*],area[*],umi:*[*],input[*]",

Версия 13:01, 16 июля 2012

Задача:

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

Решение:

Для решения задачи был написан небольшой плагин "UmiSpoiler" для TinyMCE. Плагин можно скачать отсюда.

Чтобы установить плагин нужно распаковать архив в папку "/js/tinymce/jscripts/tiny_mce/plugins/". Далее открыть файл "/js/tinymce/jscripts/tiny_mce/tinymce_custom.js" и добавить в объект mceCustomSettings два параметры "plugins" и "toolbar_standart", чтобы содержание файла выглядело примерно так:

// index/reference page for all available core configuration options in TinyMCE:
// http://wiki.moxiecode.com/index.php/TinyMCE:Configuration

window.mceCustomSettings = {
  convert_fonts_to_spans : true,
  cleanup : true,

  plugins : "safari,spellchecker,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,imagemanager,umispoiler,",

  toolbar_standart : "imagemanager,fontsettings,tablesettings,|,"
    + "cut,copy,paste,|,pastetext,pasteword,|,selectall,cleanup,|,"
    + "undo,redo,|,"
    + "link,unlink,anchor,image,media,|,"
    + "charmap,code,|,umispoiler,",
 
  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"
}

После проделанных действий на панели визуального редактора должна появится кнопка "Вставить спойлер". По нажатию на кнопку появится диалоговое окно, в котором задаётся заголовок и текст спойлера.


Spoiler-button.png

Кнопка "Вставить спойлер" на панели визуального редактора


Spoiler-dlg.png

Диалог параметров спойлера