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:

bold button gets active on placing text cursor onto bold text

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.

superscript button stays inactive on placing text cursor onto superscripted text

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.

1 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.activeButtonsStates.cite = "citebtn";

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.