thêm danh sách thả xuống tùy chỉnh trong tinymce

Question

Tôi phải hiển thị danh sách thả xuống trong tinymce. Tôi googled tìm thấy bất kỳ hướng dẫn hoặc bất kỳ ví dụ tốt nhưng tôi chỉ tìm thấy mã:

// 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); 

Mã này dường như để tạo ra một danh sách thả xuống nhưng tôi không biết được nơi để đặt mã này hoặc làm thế nào để sử dụng nó để hiển thị danh sách thả xuống tùy chỉnh. Vui lòng ai đó giúp tôi trong việc thêm danh sách thả xuống tùy chỉnh trong tinyMCE.

Answer 1

Đây là tài liệu về TinyMCE để tạo plugin http://www.tinymce.com/wiki.php/TinyMCE3x:Creating_a_plugin. Tôi sẽ bắt đầu với điều đó chỉ để tìm hiểu cách plugin hoạt động. Sau đó, để có được một cảm giác tốt hơn cho việc tạo ra một trình đơn thả xuống nhìn vào plugin contextmenu. Sao chép và sửa đổi nó để đáp ứng nhu cầu của bạn.

Answer 2

Đầu tiên, đăng ký plugin:

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' 
    }); 
}); 

Sau đó thêm vào danh sách các Plugin khi bạn khởi soạn thảo của bạn:

$('#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 
    }); 
}); 

Sau đó thêm vào danh sách các Plugin khi bạn khởi tạo biên tập viên của bạn:

$('#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 
}); 

Sau đây là cách nút phẳng với thả xuống trông giống như: