TinyMCE 4 向菜單欄添加下拉菜單

Question

我需要在 TinyMCE 4 中的“工具”項旁邊添加另一個下拉菜單：

我找到的最接近的解決方案是這樣的：

// Adds a custom menu item to the editor that inserts contents when clicked
// The context option allows you to add the menu item to an existing default menu
tinymce.init({
   ...

   setup: function(ed) {
      ed.addMenuItem('example', {
         text: 'My menu item',
         context: 'tools',
         onclick: function() {
            ed.insertContent('Hello world!!');
         }
      });
   }
});

但它只會向現有的“工具”菜單添加一個項目。

Answer 1

當您調用 tinymce.init() 以在現代主題上添加新的菜單欄項時，您可以嘗試同時指定 'menu' 和 'menubar' 選項。

我試過了，它有效。

您可以使用 TinyMCE 4.1.7 在http://fiddle.tinymce.com/39eaab/1上查看實時演示。

<script type="text/javascript">
tinymce.init({
    selector: "textarea",
    menu : {
        file   : {title : 'File'  , items : 'newdocument'},
        edit   : {title : 'Edit'  , items : 'undo redo | cut copy paste pastetext | selectall'},
        insert : {title : 'Insert', items : 'link media | template hr'},
        view   : {title : 'View'  , items : 'visualaid'},
        format : {title : 'Format', items : 'bold italic underline strikethrough superscript subscript | formats | removeformat'},
        table  : {title : 'Table' , items : 'inserttable tableprops deletetable | cell row column'},
        tools  : {title : 'Tools' , items : 'spellchecker code'},
        newmenu: {title : 'New Menu', items : 'newmenuitem'}
    },
    menubar: 'file edit newmenu',
    setup: function(editor) {
        editor.addMenuItem('newmenuitem', {
            text: 'New Menu Item',
            context: 'newmenu',
            onclick: function () { alert('yey!'); }
        });
    }
});
</script>

<form method="post" action="dump.php">
    <textarea name="content"></textarea>
</form>

Answer 2

不確定這是你需要的，但如果你試試這個怎么辦：

<script type="text/javascript">
tinymce.init({
    selector: "textarea",
    toolbar: "mybutton",
    setup: function(editor) {
        editor.addButton('mybutton', {
            type: 'menubutton',
            text: 'My button',
            icon: false,
            menu: [
                {text: 'Menu item 1', onclick: function() {editor.insertContent('Menu item 1');}},
                {text: 'Menu item 2', onclick: function() {editor.insertContent('Menu item 2');}}
            ]
        });
    }
});
</script>

你可以在這里查看代碼的結果

Answer 3

由於您動態生成菜單，即菜單數據來自一個 JSON 對象，我嘗試通過 FOR 循環，但它對我不起作用。

editor.ui.registry.addMenuButton('mybutton', {
                text: 'Insertar un campo del formulario',
                fetch: function (callback) {
                    var menuItems = [];
                    for (let i = 0; i < Object.keys(json).length; i++){
                        //console.log(json[i]);
                    //for (var clave in json) {
                        var items = [
                            {
                                type: 'menuitem',
                                text: json[i].text,
                                onAction: function () {
                                    editor.insertContent(json[i].value);
                                }
                            }
                        ];
                        menuItems.push(items);
                    }
                    callback(menuItems);
                }
            });