How to set a button's active state in WYSIWG (Redactor plugin)?

Question

I am currently writing a simple Redactor plugin which adds a button to the WYSIWYG editor in Craft 2. This one just formats the selected text like the existing bold button does.

Now, my problem is that whenever some text is marked as bold and the text cursor is placed onto that text then the bold button's state is changed to active – as expected.

Like so:

But the same thing with my custom button that is added by my plugin won't work. The button's state is still inactive.

Have a look on the official docs of Redactor about how to Add Sup and Sub Buttons which comes with an example plugin (including the plugin code and the resulting WYSIWYG). There a superscript (x²) button is added. Even that one doesn't work.

As you can see in the screenshot the superscript button (x²) doesn't change its state to active.

So, my question is:
How can I achieve that the superscript button (x²) gets active when placing the text cursor onto superscripted text within the WYSIWYG editor?

This superscript button is just an example. Of course, the solution should work for all other custom buttons as well. Also, I assume that my code base is the same that you can find on the how-to page I linked above.

Answer 1

I've done this by adding my button to activeButtons and adding my inline tag to activeButtonsState after adding button in init function.

In below example, cite is the tag and citebtn is the button's name.

init: function()
{
    ...
    if($.inArray("citebtn", this.opts.activeButtons) < 0) {
        this.opts.activeButtons.push("citebtn");
        this.opts.activeButtonsStates.cite = "citebtn";
}