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

<p>In below example, cite is the tag and citebtn is the button's name.</p>

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

CC BY-SA 3.0
2018-02-09T10:34:08.373Z
2018-02-09T14:52:42.257Z
2018-02-09T14:52:42.257Z
Ramazan Binarbasi
<p>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.</p>

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

<p>Like so:</p>

<p><a href="https://i.sstatic.net/jWVVs.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/jWVVs.png" alt="bold button gets active on placing text cursor onto bold text"></a></p>

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

<p>Have a look on the official docs of Redactor about how to <a href="https://imperavi.com/redactor/examples/buttons-sup-and-sub/" rel="nofollow noreferrer" title="Add Sup and Sub Buttons">Add Sup and Sub Buttons</a> 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.</p>

<p><a href="https://i.sstatic.net/XVIX4.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/XVIX4.png" alt="superscript button stays inactive on placing text cursor onto superscripted text"></a></p>

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

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

<p>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.</p>

<plugin-development><redactor>
How to set a button's active state in WYSIWG (Redactor plugin)?
# How to set a button's active state in WYSIWG (Redactor plugin)?

(Asked by: username_0 on 2017-05-19)

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](https://i.sstatic.net/jWVVs.png)](https://i.sstatic.net/jWVVs.png)

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](https://imperavi.com/redactor/examples/buttons-sup-and-sub/ "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](https://i.sstatic.net/XVIX4.png)](https://i.sstatic.net/XVIX4.png)

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.

**Tags:** plugin-development, redactor


---

## 1 answers

### Answer by username_1 on 2018-02-09. Score: 2

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";
}


---

