Drop down menu 在tinymce中添加自定义下拉列表

我必须在tinymce中显示一个下拉列表。我在谷歌上搜索过任何教程或好的示例，但我发现了以下代码：

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

这段代码似乎创建了一个下拉列表，但我不知道把这段代码放在哪里，也不知道如何使用它来显示自定义下拉列表。

---

请有人帮助我在tinyMCE中添加自定义下拉列表。

这是tinyMCE创建插件的文档。我将从这开始，只是为了了解插件是如何工作的。然后，为了更好地创建下拉菜单，请查看contextmenu插件。复制并修改它以满足您的需要。

首先，注册插件：

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

然后在初始化编辑器时添加到插件列表中：

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

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

然后在初始化编辑器时添加到插件列表中：

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

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

下面是带有下拉菜单的面板按钮的外观：

---

是TinyMCE 4b还是3.5？我正在使用TinyMCE 4b，但不确定这段代码。我刚从TinyMCE.com上选择了这段代码。您希望下拉列表显示在哪里（菜单，编辑窗口）？@loyalBrown是的。我该怎么做呢？你上面列出的例子看起来像是TinyMCE 3中的例子。这两个代码库之间有很大的不同。我可以告诉你必须为3.x版做，但我对tinyMCE 4不太熟悉。你能解释一下你的答案吗？这将帮助其他看到您的代码并希望将其应用于自己情况的人。是的，为什么不。。在editor.addMenuItem上，它添加了一个菜单项来插入tinymce和editor.addButton的菜单。它在工具栏上添加了一个菜单项按钮，供那些难以理解我提供的链接的人使用。我正在查看contextmenu插件代码，我不明白当你点击菜单项时，是如何触发动作的。嗯。。看起来，这就像将

onclick

属性添加到菜单项一样简单。