TinyMCE formatting toolbar buttons

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: