Trumbowyg: Adding custom button in panel

[neerajjoshi]

Hi,
First of all thanks for making this editor it load fast then any other plugins available .

I am not sure it is a bug report or a feature request, but it would be nice if developers working on them add new buttons as required for their project like I want to add 2 new buttons in panel and want to perform some action on their click but did not get how to add new custom button.

I followed the below example

$.trumbowyg.btnsGrps.test = ['bold', 'link'];

/* Add new words for customs btnsDef just below */
$.extend(true, $.trumbowyg.langs, {
    en: {
        align: 'Alignement',
        image: 'Image'
    }
});
var customizedButtonPaneTbwOptions = {
    lang: 'en',
    closable: true,
    fixedBtnPane: true,
    btnsDef: {
        // Customizables dropdowns
        align: {
            dropdown: ['justifyLeft', 'justifyCenter', 'justifyRight', 'justifyFull'],
            ico: 'justifyLeft'
        },
        image: {
            dropdown: ['insertImage', 'upload', 'base64'],
            ico: 'insertImage'
        }
    },
    btns: ['viewHTML',
        '|', 'formatting',
        '|', 'btnGrp-test']
};

but it work only for bold and link option if I change them then no button appear.

It will be good if you can write a detail example like how to add a custom button (a custom image for new button ) and attaching its with custom functionality

Thanks

[Alex-D]

Hi!

I need to improve documentation for that. I will do that soon.

[rharriso]

@Alex-D, have you had a chance to document this? It's not obvious how it could be done stepping through the source.

[Alex-D]

I work on it.

[pitchinnate]

I was able to add custom drop downs and list doing something like this:

        $('#blog_body').trumbowyg({
            btns: ['strong', 'em', 'underline', 'strikethrough', 'link', 'insertImage', 'justifydrop', 'listdrop'],
            autogrow: true,
            btnsDef: {
                justifydrop: {
                    dropdown: ['justifyLeft', 'justifyCenter', 'justifyRight', 'justifyFull'],
                    ico: "justifyCenter"
                },
                listdrop: {
                    dropdown: ['unorderedList', 'orderedList'],
                    ico: "unorderedList"
                }
            }
        });

Hopefully that is helpful to others.