добавление пользовательского выпадающего списка в tinymce

Мне нужно отобразить выпадающий список в tinymce. Я googled найти любой учебник или хороший пример, но я только что нашел, что код:

// 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.

Ответы

Ответ 1

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

Затем добавьте в свой список плагин при инициализации редактора:

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

Вот как выглядит панель с выпадающим списком:

Ответ 2

Сначала зарегистрируйте плагин:

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

Ответ 3

Вот документация TinyMCE для создания плагина http://www.tinymce.com/wiki.php/TinyMCE3x:Creating_a_plugin. Я начну с этого, чтобы узнать, как работают плагины. Затем, чтобы лучше понять, как создать раскрывающееся меню, посмотрите на плагин contextmenu. Скопируйте его и внесите изменения в соответствии с вашими потребностями.

Ответ 4

Пожалуйста, скажите мне, где добавить этот код, я новичок в этой области. Благодарю вас

Ответ 5

@naXa Пожалуйста, скажите мне, где добавить этот код, я новичок в этой области. Благодарю вас