TinyMCE4 How to toggle selfcreated Buttons

Question

I have created a Button with the Tiny Method addButton().

How is it possible to toggle the State of the Button ?

In my first simple case I have a Button with Fullscreen (Different Functionality than the built-in function) and want to hide it after getting the Fullscreen State and replace it with an "End Fullscreen" Button.

But I have not found the right way to show or hide them.

I know that the button will get an ID, but I dont know which one ...

Answer 1

If you add the button with:

editor.addButton('customFullscreen', {
    tooltip: 'Fullscreen',
    shortcut: 'Ctrl+Alt+F',
    onClick: toggleCustomFullscreen,
    onPostRender: function() {
        var self = this;

        editor.on('CustomFullscreenStateChanged', function(e) {
            if (e.state) {
                self.name('Close fullscreen');
                //self.active(e.state);  // uncomment for "pressed" look
            } else {
                self.name('Fullscreen');
            }
        });
    }
});

and handle the event with

var customFullscreenState = false;
function toggleFullscreen() {
    customFullscreenState = !customFullscreenState;

    if (customFullscreenState) {
        // do something, we are active
    } else {
        // do something else, we're unactive
    }

    editor.fire('CustomFullscreenStateChanged', {state: fullscreenState});
}

You should be able to have it look like wo different button and do two different things depending on state, but it will still just be one button that changes action and text.