# Add buttons to the tinyMCE toolebar to toggle custom items (styles, classes etc.)

tinymce_toggle.md

#TinyMCE style toggle button

First of all, you need to define a custom format:

formats: {
   custom_format: {inline: 'span', attributes: {class: 'some_css_class'}}
}

Then you'll have to add a button to your toolbar:

toolbar: "mybutton",

Next, you need to setup your button, so that it toggles the format:

setup: function(editor) {
        editor.addButton('mybutton', {
            text: 'My button',
            icon: false,
            onclick: function() {
                tinymce.activeEditor.formatter.toggle('custom_format')
            }
        });
}

Your tinymce.init function should look like this:

tinymce.init({
    selector: "textarea",
    formats: {
       // Other formats...
       custom_format: {inline: 'span', styles:{color: "red"}, attributes: {class: 'some_css_class'}}
    }
    // Other default toolbars
    toolbar_n: "mybutton",

    // Finally, setup your button
    setup: function(editor) {
        editor.addButton('mybutton', {
            text: 'My Button',
            icon: false,
            onclick: function() {
                tinymce.activeEditor.formatter.toggle('custom_format')
            }
        });
    }
    ````