Wysiwyg-editor: Adding Different Buttons to the QuickInsert Plugin Popup

[Zetal911]

I have the following in configuring my editor:

quickInsertButtons: ['image', 'table', 'insertLink', 'insertVideo', 'insertFile']

But only the buttons for image and table show up, not the ones that are already used in the Toolbar. I'm about to go and make my own buttons using the usual method, but I just thought it was odd that the pre-made buttons weren't working with the quickInsert plugin.

Thanks!

[stefanneculai]

The buttons from the quick insert plugin are different than the ones from the toolbar. They are designed to make quick actions and they have a totally different behaviour than the ones which are available in the toolbar. The current available list for quick insert is: ['image', 'table', 'ul', 'ol', 'hr', 'paragraph'].

[Zetal911]

I thought it was something like that. Do you have any advice to point me in the direction of adding new buttons to the Quick Insert plugin?
Thanks!

[stefanneculai]

We'll add some docs on our website for it shortly.

[nicooprat]

Is it possible to create a custom button that can be used in quickInsertButtons?

[mverstraete]

Any news on this? Documentation on how to add custom buttons to the QuickInsert menu would be fantastic.

[stefanneculai]

Unfortunately, it's not possible yet and I don't have an ETA to share with you guys.

[prakash-chokalingam]

waiting for this feature !

[mpatelj]

Any update on this?

[ianflorentino]

@stefanneculai would love to be able to at least add toolbar btns to the quickinsert. Any update on this?

[msisto]

+1

It would be soooo awesome if you could register a new button with some HTML for it to insert.

[raerae13]

+1
Our team would love to have additional options for the quick insert buttons. Specifically "insert video" and "insert file".

[clechner77]

Agreed. This is a big one on our list too. Want to use Quick Insert to add frequent snipped for Headers / Subheaders as we are using the editor for a wiki page.

[bencallis1]

Any update on this?

[stefanneculai]

@bencallis1 not yet. Sorry to keep you guys waiting so long.

[SeanDKendle]

I'd like to add my vote for this functionality. I would like to be able to add custom buttons the same way you can in the toolbar. Thanks!

[SeanDKendle]

I've actually worked up a solution to this. I'd love your thoughts on this.

Altered the end of quick_insert.min.js:

    function add(newButton) {
        var iconModule = a.FE.MODULES.icon();

        b.opts.quickInsertButtons.push(newButton.name);
        a.FE.DefineIcon(newButton.name, newButton.icon);
        a.FE.QUICK_INSERT_BUTTONS[newButton.name] = newButton.button;  //abusing a constant, but not losing sleep over it.  Could add a public method to add elements

        iconModule.create(newButton.name);
    }
    var k,
    l;
    return {
        _init: j,
        hide: f,
        add: add
    }

Then, in my custom plugin, I did this:

    /*
     * newButton: {
     *  name: String,
     *  icon: {
     *      NAME: String //FontAwesome icon class
     *  },
     *  button: {
     *      icon: String, //internal icon name, should match name field above
            callback: function () {}, //function to call on button click
            requiredPlugin: String, //'nameOfPlugin', - optional
            title: String //'Tooltip Text Here' 
     *  }
     */
    var newButton = "";

    newButton = {
        name: "strip",
        icon: {
            NAME: "object-group"
        },
        button: {
            icon: 'strip',
            callback: function () {
                this.quickInsert.hide(),
                console.log("strip button clicked!!!  This is where button logic goes.")
                , this.undo.saveStep()
            },
            requiredPlugin: 'strip', // name of your plugin, omit this line if you aren't making a plugin per se
            title: 'Strip'
        }
    };
    editor.quickInsert.add(newButton);

[stefanneculai]

@Zetal911 @nicooprat @bencallis1 @clechner77 @ianflorentino @raerae13 @msisto @mpatelj @prakash-chokalingam Here is the official way of doing this starting with version 2.7.0: https://www.froala.com/wysiwyg-editor/examples/custom-quick-insert-button.

[msisto]

Woah!