Dodawanie niestandardowej rozwijanej listy w tinymce

Question

Muszę wyświetlić rozwijaną listę w cyrylicy. Google znaleźć żadnych samouczek lub jakiegokolwiek dobrego przykładu, ale po prostu okazało się, że kod:

// Adds a menu to the currently active editor instance 
var dm = tinyMCE.activeEditor.controlManager.createDropMenu('somemenu'); 

// Add some menu items 
dm.add({title : 'Menu 1', onclick : function() { 
    alert('Item 1 was clicked.'); 
}}); 

dm.add({title : 'Menu 2', onclick : function() { 
    alert('Item 2 was clicked.'); 
}}); 

// Adds a submenu 
var sub1 = dm.addMenu({title : 'Menu 3'}); 
sub1.add({title : 'Menu 1.1', onclick : function() { 
    alert('Item 1.1 was clicked.'); 
}}); 

// Adds a horizontal separator 
sub1.addSeparator(); 

sub1.add({title : 'Menu 1.2', onclick : function() { 
    alert('Item 1.2 was clicked.'); 
}}); 

// Adds a submenu to the submenu 
var sub2 = sub1.addMenu({title : 'Menu 1.3'}); 

// Adds items to the sub sub menu 
sub2.add({title : 'Menu 1.3.1', onclick : function() { 
    alert('Item 1.3.1 was clicked.'); 
}}); 

sub2.add({title : 'Menu 1.3.2', onclick : function() { 
    alert('Item 1.3.2 was clicked.'); 
}}); 

dm.add({title : 'Menu 4', onclick : function() { 
    alert('Item 3 was clicked.'); 
}}); 

// Display the menu at position 100, 100 
dm.showMenu(100, 100); 

Kod ten wydaje się stworzenie listy rozwijanej, ale nie wiem gdzie umieścić ten kod i jak go używać do wyświetl niestandardową rozwijaną listę. Uprzejmie proszę o pomoc w dodaniu niestandardowej rozwijanej listy w tinyMCE.

Answer 1

Oto dokumentacja TinyMCE do tworzenia wtyczki http://www.tinymce.com/wiki.php/TinyMCE3x:Creating_a_plugin. Zacznę od tego, aby dowiedzieć się, jak działają wtyczki. Następnie, aby lepiej poznać tworzenie menu rozwijanego, spójrz na wtyczkę contextmenu. Skopiuj i zmodyfikuj, aby spełnić Twoje potrzeby.

Answer 2

Najpierw zarejestrować wtyczki:

var myListItems = ['Item1','Item2']; 
tinymce.PluginManager.add('myNewPluginName', function(editor) { 
    var menuItems = []; 
    tinymce.each(myListItems, function(myListItemName) { 
     menuItems.push({ 
      text: myListItemName, 
      onclick: function() { 
       editor.insertContent(myListItemName); 
      } 
     }); 
    }); 

    editor.addMenuItem('insertValueOfMyNewDropdown', { 
     icon: 'date', 
     text: 'Do something with this new dropdown', 
     menu: menuItems, 
     context: 'insert' 
    }); 
}); 

następnie dodać do swojej listy wtyczki podczas inicjalizacji edytor:

$('#myTesxtArea').tinymce({ 
    theme: "modern", 
    convert_urls: false, 
    height: 100, 
    plugins: [ 
     "advlist autolink lists link image charmap print preview hr anchor pagebreak", 
     "searchreplace wordcount visualblocks visualchars code fullscreen", 
     "insertdatetime nonbreaking save table contextmenu directionality", 
     "myNewPluginName paste textcolor" 
    ], 
    toolbar1: "undo redo | forecolor backcolor | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image", 
    image_advtab: true 
}); 

Answer 3

var myListItems = ['Item1', 'Item2', 'Item3', 'Item4', 'Item5', 'Item6', 'Item7', 
     'Item8', 'Item9', 'Item10', 'Item11']; 

tinymce.PluginManager.add('mypluginname', function (editor) { 
    var menuItems = []; 
    tinymce.each(myListItems, function (myListItemName) { 
     menuItems.push({ 
      text: myListItemName, 
      onclick: function() { 
       editor.insertContent(myListItemName); 
      } 
     }); 
    }); 

    editor.addButton('mypluginname', { 
     type: 'menubutton', 
     text: 'My Plugin Name', 
     icon: 'code', 
     menu: menuItems 
    }); 

    editor.addMenuItem('mypluginnameDropDownMenu', { 
     icon: 'code', 
     text: 'My Plugin Name', 
     menu: menuItems, 
     context: 'insert', 
     prependToContext: true 
    }); 
}); 

Następnie dodać do swojej listy wtyczki podczas inicjalizacji Twój edytor:

$('#myTesxtArea').tinymce({ 
theme: "modern", 
convert_urls: false, 
height: 100, 
plugins: [ 
    "advlist autolink lists link image charmap print preview hr anchor pagebreak", 
    "searchreplace wordcount visualblocks visualchars code fullscreen", 
    "insertdatetime nonbreaking save table contextmenu directionality", 
    "paste textcolor","mypluginname" 
], 
toolbar1: "undo redo | forecolor backcolor | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image", 
image_advtab: true 
}); 

Oto jak przycisk panel z listy rozwijanej wygląda następująco: