Redactor's API doesn't work for image button

[architchandra]

Description

Using Redactor's API to modify attributes of the image button doesn't work. The image button is not listed using the this.toolbar.getButtons() method.

For context, here's the question I had posted earlied on the Craft CMS Discord.

I'm trying to modify the tooltip of the image button in Redactor. I followed the plugin tutorial in Redactor's docs (https://imperavi.com/redactor/docs/how-to/create-a-plugin/) to use the setTooltip method on the button.
https://imperavi.com/redactor/docs/api-services/toolbar-button/#s-settooltip

I was able to change the tooltip for all buttons except image. Upon fetching the list of buttons using this.toolbar.getButtons(), it looks like the image button is not being registered by Redactor at all.

Here is the output that I'm seeing (my expectation was that image should be between lists and video).

0: Object { app: {…}, name: "html", dropdown: false, … }
1: Object { app: {…}, opts: {…}, name: "format", … }
2: Object { app: {…}, opts: {…}, name: "link", … }
3: Object { app: {…}, name: "bold", dropdown: false, … }
4: Object { app: {…}, name: "italic", dropdown: false, … }
5: Object { app: {…}, opts: {…}, name: "lists", … }
6: Object { app: {…}, name: "video", dropdown: false, … }
7: Object { app: {…}, name: "fullscreen", dropdown: false, … }
8: Object { app: {…}, name: "Matrix Split", dropdown: false, … }
length: 9

Is this happening because Craft links to its own interface for adding images? Is there an easy way around this to change the tooltip for the image button?

Additional info

Craft version: 3.4.30
PHP version: 7.2.23
Database driver & version: MySQL 5.7.28
Redactor Plugin version: 2.6.1
Redactor Split version (additional plugin used): 1.1.0

[andris-sevcenko]

Can you try moving your code from the init method to the start method?

[architchandra]

I'm using the following code currently.

(function($R)
{
   $R.add('plugin', 'avoid-image', {
        init: function(app)
        {
            this.app = app;

            // define toolbar service
            this.toolbar = app.toolbar;
        },
        start: function()
        {
            var imageButton = this.toolbar.getButton('image');
            imageButton.setTooltip('Use dedicated image block');
        },
    });
})(Redactor);

Here, console.log(imageButton) returns false. If I instead write var imageButton = this.toolbar.getButton('bold');, I get the correct object in the console. This makes it seem that there is some change that's been made to the Image button.

I tried move the code that I'm currently adding to init to the start method, but that just said that app is undefined.

Please let me know if you think there is an easy way around this.
Thanks.

[andris-sevcenko]

Strange. Craft is adding the button via the API provided, so I'm not sure why you'd have trouble finding that button. )https://github.com/craftcms/redactor/blob/v2/src/assets/field/src/js/PluginBase.js#L18-L66)

[architchandra]

Were you able to reproduce this issue at your end? Does the image button show up if you use getButtons()?

I feel like I've tried everything I could think of (even trying to change the content of the tooltip by modifying the Control Panel CSS) but the seemingly simple task of modifying the Image button tooltip is not getting done for me.

Any ideas on what could work?

Thanks and sorry for the trouble.

[andris-sevcenko]

I'm able to reproduce this. This happens because Craft does its button magic after Redactor has been initialized.

One way to solve this would be to sprinkle some events throughout the Redactor field code and you could listen to those events. So, when the Craft Redactor JS code fires an event that it's done initializing, you could fix that button.

Would that work for you?

[architchandra]

Yes, absolutely. I'm assuming that I can just refer to those events like the init and start methods in the sample plugin code.

Also, because I am working on a client project on this, can you give me a rough ETA?

Thanks. :)

[andris-sevcenko]

Does sometime next week work for you?

[architchandra]

Yes, it will.
Thank you.

[andris-sevcenko]

Just added an event to address this. You can make a plugin to listen to it, or you can just dump the following code wherever:

Garnish.on(Craft.RedactorInput, 'afterInitializeRedactor', function(event) {
    event.inputField.redactor.toolbar.getButton('image').setTooltip('Use dedicated image block');
});

[andris-sevcenko]

Just cut the 2.8.2 release so you can pull this in!