TinyMCE link and unlink buttons not working in custom theme

Question

I have a TinyMCE custom theme with a few buttons (bold, italic, strikethrough, justify left, center and right, bullist, numlist, link and unlink).

Custom theme

The problem is with numlist, bullist, link and unlink buttons. These don't work, the others behave OK.

My tinyMCE.init looks like this:

tinyMCE.init({

                mode: "textareas",
                editor_selector: "tinymce",
                language: false, // Prevents language packs from loading

                theme: function(editor, target) {
                    var dom = tinymce.DOM, editorContainer;

                    // Generate UI
                    editorContainer = dom.insertAfter(dom.create('div', {style: 'border: 1px solid gray'},
                        '<div>' +
                            '<button class="tinybutton tinybold" data-mce-command="bold"></button>' +
                            '<button class="tinybutton tinyitalic" data-mce-command="italic"></button>' +
                            '<button class="tinybutton tinystrike" data-mce-command="strikethrough"></button>' +
                            '<button class="tinybutton tinybullist" data-mce-command="bullist"></button>' +
                            '<button class="tinybutton tinynumlist" data-mce-command="numlist"></button>' +
                            '<button class="tinybutton tinyleft" data-mce-command="justifyleft"></button>' +
                            '<button class="tinybutton tinycenter" data-mce-command="justifycenter"></button>' +
                            '<button class="tinybutton tinyright" data-mce-command="justifyright"></button>' +
                            '<button class="tinybutton tinylink" data-mce-command="link"></button>' +
                            '<button class="tinybutton tinyunlink" data-mce-command="unlink"></button>' +
                        '</div>' 
                    ), target);

                    // Set editor container size to target element size
                    dom.setStyle(editorContainer, 'width', target.offsetWidth);

                    // Bind events for each button
                    tinymce.each(dom.select('button', editorContainer), function(button) {
                        dom.bind(button, 'click', function(e) {
                            e.preventDefault();

                            // Execute editor command based on data parameters
                            editor.execCommand(
                                dom.getAttrib(e.target, 'data-mce-command'),
                                false,
                                dom.getAttrib(e.target, 'data-mce-value')
                            );
                        });
                    });

                    // Register state change listeners
                    editor.onInit.add(function() {
                        tinymce.each(dom.select('button', editorContainer), function(button) {
                            editor.formatter.formatChanged(dom.getAttrib(button, 'data-mce-command'), function(state) {
                                button.style.color = state ? "red" : "";
                            });
                        });
                    });

                    // Return editor and iframe containers
                    return {
                        editorContainer: editorContainer,
                        iframeContainer: editorContainer.lastChild,

                        // Calculate iframe height: target height - toolbar height
                        iframeHeight: target.offsetHeight - editorContainer.firstChild.offsetHeight
                    };
                },

                encoding: "xml",
                setup: function (ed) {

                    ed.onContextMenu.add(function (ed, e) {
                        tinymce.activeEditor.save();
                    });
                    ed.onKeyUp.add(function (ed) {
                        tinymce.activeEditor.save();
                    });
                    ed.onClick.add(function (ed) {
                        tinymce.activeEditor.save();
                    });
                    ed.onGetContent.add(function (ed, o) {
                        o.content = o.content.replace(/'/g, "&apos;");
                    });
                    //ed.onInit.add(function (ed, evt) {
                    //    tinymce.dom.Event.add(ed.getDoc(), 'blur', function (e) {
                    //        // Do something when the editor window is blured.
                    //        tinymce.activeEditor.save();
                    //    });
                    //});
                },
                width: "100%"                    
            });

I'm not sure it this is how I'm supposed to handle all the buttons, or I have to handle those which don't work in another manner. Is this the right way to use standard buttons?

editor.execCommand(
       dom.getAttrib(e.target, 'data-mce-command'),
       false,
       dom.getAttrib(e.target, 'data-mce-value')
       );

hmm, i am not sure this fiddle will help. where is your editor_css to define the toolbar icons? — Thariama
Well, your last comment helped a lot. I made a new skin and used the default buttons. Thanks for your help. — Marius Balaban

Unknown Unknown · Accepted Answer · 2014-03-12T23:29:02

Use editor_css to define the toolbar icons. Make a new skin and use the default buttons.

TinyMCE link and unlink buttons not working in custom theme

1 Answers