CODEWITHSUNDEEP
javascripttinymcetinymce-4
Adrian Buzea
Adrian Buzea

Reputation: 836

tinyMCE adding custom menu(with submenus) at runtime

I want to add a custom menu (like file, edit) to all of my tinyMCE components. Like what is done here. i tried using that code but it doesn't work, and I was thinking if it was possible to do it another way, without creating a plugin, and just adding my custom menu in the tinyMCE.init() function, on setup. I found a way to add a submenu like this

tinyMCE.init({
        mode: "textareas",
        plugins: [
                        "advlist autolink lists link image charmap print preview anchor",
                        "searchreplace visualblocks code fullscreen",
                        "insertdatetime media table contextmenu paste "
                        ],
        toolbar: " undo redo | styleselect | bullist numlist outdent indent | link image",
        setup: function (ed) {

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

This adds a menu item in the Tools menu. Instead of that menu item, I need to add a whole menu like in the link above, but I don't know how. I tried adding the code for creating the menu in my setup function like this 

tinyMCE.init({
        mode: "textareas",
        plugins: [
                        "advlist autolink lists link image charmap print preview anchor",
                        "searchreplace visualblocks code fullscreen",
                        "insertdatetime media table contextmenu paste "
                        ],
        toolbar: " undo redo | styleselect | bullist numlist outdent indent | link image",
        setup: function (ed) {
            var c = ed.createMenuButton('mymenubutton', {
                title: 'My menu button',
                image: 'img/example.gif',
                icons: false
            });

            c.onRenderMenu.add(function (c, m) {
                var sub;

                m.add({ title: 'Some item 1', onclick: function () {
                    tinyMCE.activeEditor.execCommand('mceInsertContent', false, 'Some item 1');
                } 
                });

                m.add({ title: 'Some item 2', onclick: function () {
                    tinyMCE.activeEditor.execCommand('mceInsertContent', false, 'Some item 2');
                } 
                });

                sub = m.addMenu({ title: 'Some item 3' });

                sub.add({ title: 'Some item 3.1', onclick: function () {
                    tinyMCE.activeEditor.execCommand('mceInsertContent', false, 'Some item 3.1');
                } 
                });

                sub.add({ title: 'Some item 3.2', onclick: function () {
                    tinyMCE.activeEditor.execCommand('mceInsertContent', false, 'Some item 3.2');
                } 
                });
            });

        }
    });

but it doesn't work. What's the easiest way to go about doing this ?

Upvotes: 2

Views: 3080

Answers (1)

Adrian Buzea
Adrian Buzea

Reputation: 836

Managed to solve it by adding a new menu in the toolbar like here

Upvotes: 1

Related Questions