How to add a button?

[PAEz]

With the default composer its rather easy to add extra buttons, I cant figure how to do it properly with this? Any tips would be appreciated. The docs (I think) are showing how to add a button when starting redactor? You can add one using external api stuff once redactor has started, but then the script has to wait....I know how to do that crap (I like making chrome extensions) but thats bleh. I can add one using something like this....

        if ($ && $.Redactor) {
            $(function() {
                if (!$.Redactor.opts.plugins) $.Redactor.opts.plugins = [];
                $.Redactor.opts.plugins.push('advanced');
                $.Redactor.prototype.advanced = function() {
                    return {
                        init: function() {
                            var button = this.button.add('advanced', 'Advanced');
                            // make your added button as Font Awesome's icon
                            this.button.setAwesome('advanced', 'fa-tasks');
                            this.button.addCallback(button, this.advanced.testButton);
                        },
                        testButton: function(buttonName) {
                            alert(buttonName);
                        }
                    };
                };
                // This is how your MEANT to do it....
                // $('#redactor').redactor({
                //     plugins: ['advanced']
                // });
            });
    }

..but I just figured that out by mucking around and cant find it documented anywhere. I don't know much about hooks yet, but isn't this somewhere that one could be useful? One to register a plugin to be registered before the start of redactor as it seems your only meant to add them at the start of redactor?

If I'm just missing something simple...I'm sorry, I'm new and impatient ;)

[julianlam]

Hm... well, Redactor supports callbacks for events, take a look here: http://imperavi.com/redactor/docs/callbacks/

However, it looks like we don't use 'em: https://github.com/NodeBB/nodebb-plugin-composer-redactor/blob/master/static/lib/client.js#L27-L29

We can add it in, however...

@drewdotpro, perhaps fire off a $(window).trigger('action:composer.refactor.loaded'); here?

[PAEz]

That bit of the doc like so much has this $('#redactor').redactor({ which is targeting something with the id of redactor. Could the textarea have that added to it for ease? Right now it doesnt seem to have any id and I wasnt sure how to query it. All of those ones rely on redactor already being started, so a full proof way of knowing thats happened would be great. But also if there was a proper way to add plugins to redactor before it was started that would be great, as the ways to do things externally and with plugins is very different.

[julianlam]

If we fire a client-side hook, you'd be able to listen for it with a $(window).on();, and we'd pass in the redactor composer's element reference for you to use.

[yariplus]

I was trying to do this today and ended up doing it this way.

    $(window).on('action:composer.loaded', function(ev, data) {
        var postContainer = $('#cmp-uuid-' + data.post_uuid),
            textarea = postContainer.find('textarea');

        textarea.redactor({
                focus: true,
                plugins: [ ],
                startCallback: function() {
                    $(window).trigger('action:redactor.init');          // First load, create plugins.
                    $(window).off('action:redactor.init');
                    $(window).trigger('action:redactor.loading', this); // Modify options here.
                },
                initCallback: function() {
                    $(window).trigger('action:redactor.loaded', this);  // Can access elements now.
                }
            });
    });

and client example:

$(window).on('action:redactor.init', function(event, redactor) {
    // Add plugins here.
    $.Redactor.prototype.advanced = function() {
        return {
            init: function ()
            {
                var button = this.button.add('advanced', 'Advanced');
                this.button.addCallback(button, this.advanced.testButton);
            },
            testButton: function(buttonName)
            {
                alert(buttonName);
            }
        };
    };
});

$(window).on('action:redactor.loading', function(event, redactor) {
    // Modify options here.
    redactor.opts.visual = false;
    redactor.opts.plugins.push('advanced');
});

$(window).on('action:redactor.loaded', function(event, redactor) {
    // You can access the elements now.
    console.log(redactor.$textarea);
});

Using action:composer.redactor.loaded didn't work for me because it's triggered twice. Once for action:composer.loaded and once for action:composer.redactor.loaded because of how event namespaces work.

My Thoughts: It might be nice to have an action thrown for every Callback, and add them to the redactor.js defaults. Could also be useful to have filter:redactor.settings

Hope this was useful...

[PAEz]

@yariplus Im new at this and not sure where you put the first block of code?...pretty sure I know where to put the second. Id like to be able to use your way, coz by the sounds of it its gonna work like that eventually and that looks good enough to me.

[yariplus]

@PAEz The first part I put here: https://github.com/NodeBB/nodebb-plugin-composer-redactor/blob/master/static/lib/client.js#L23-L30

[PAEz]

@yariplus Thanks for that, sorry for the late reply. So its changing the redactor core, think Ill stick with my above until something gets put in for real....but then again the end result will prolly work like this.....come on guys, put some hooks in ;)

[drewdotpro]

@PAEz when you say 'redactor core' do you mean this plugin or the redactor js itself?

[PAEz]

@drewdotpro Sorry, I meant the plugins core. Id rather not have to change anyone elses code, I figure this will get added soon....it really should ;)

[drewdotpro]

@PAEz if you and @yariplus have an improvement here that can be implemented by improving the plugin's core, feel free to put it together into a change request. That's the whole idea of its GitHub =D

[PAEz]

@drewdotpro hehe, no offense to you or the multitude of coders on github, but WHY does everyone ask for pull requests for a few lines of code that was already shown to you? Why does noone just say 'yea' and add it, or 'no' and not have to wast our time branching, changing, pushing. I know Im just being slack, but isnt everyone else?

Anyway, Im always hesitant to add/change anything I dont have a great understanding of. What @yariplus proposed looks fine to me, but I dont know anything ;). The only thing I have with yairs was why init and then loading if they happen in the same event?...just a future proofing thing? Also, in `$(window).on('action:redactor.init' you access $.Redactor directly, shouldnt that be passed to the event handler instead of expecting the plugin to know its location?

[yariplus]

@PAEz Yeah, there are a number of problems with the way I did it, which is why I didn't send a PR. I think I have a much better solution I might post today though.

[drewdotpro]

@PAEz People ask for PR because a) you know the fixer's implementation is correctly done as they have full understanding of it and b) many developers use their github to show their work for employers etc so they deserve the credit. @yariplus If you've solved this a PR is most welcome.

[yariplus]

Hmmmmm, @PAEz 's method actually works. Any triggers or methods I add are just Syntactic Sugar. Not sure if it would be worth it.

Nevertheless, I have written such a PR.