TinyMCE formatting toolbar buttons

Thu 17 October 2013

There's this WSIWYG editor called wysihtml5 that looks very nice. Unfortunatelly there's no table support so TinyMCE could be one of the alternative. I really like having buttons for each type of heading - less clicking to format the text. Unfortunatewlly in TinyMCE you have to deal with submenus for formatting. I would rather have plain toolbar buttons.

As you can see here the documentation is not very helpful on how to do it so I'd rather share the solution. Here's a plugin for having the formatting as plain toolbar buttons, just like in wysihtml5:

tinyMCE.PluginManager.add('stylebuttons', function(editor, url) {
    ['pre', 'p', 'code', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'].forEach(function(name){
        editor.addButton("style-" + name, {
            tooltip: "Toggle " + name,
            text: name.toUpperCase(),
            onClick: function() { editor.execCommand('mceToggleFormat', false, name); },
            onPostRender: function() {
                var self = this, setup = function() {
                    editor.formatter.formatChanged(name, function(state) {
                        self.active(state);
                    });
                };
                editor.formatter ? setup() : editor.on('init', setup);
            }
        })
    });
});

Now just add stylebuttons to your plugin list and any of style-p, style-h1, style-h2, style-h3, style-pre, style-code to your toolbar list. Eg:

tinyMCE.init({
    selector: '#id',
    toolbar: "undo redo | style-p style-h1 style-h2 style-h3 style-pre style-code",
    plugins: "stylebuttons",
});

Note: This works with the latest version of TinyMCE!

It looks like this:

This entry was tagged as javascript tinymce