How to add custom button to react-trumbowyg?

[nllsdfx]

I'm trying add a custom button but it doesn't work (works normal in vanilla js):

const btnsDef = {
        uploadImage: {
            fn: function () {
               //todo
            },
            title: 'Upload Image',
            text: 'Upload Image',
            isSupported: function () {
                return true;
            },
            ico: 'upload',
            hasIcon: true
        }
    };

    return (
        <FormGroup>
            <Trumbowyg
                btnsDef={btnsDef}
                buttons={
                    [
                        ['viewHTML'],
                        ['undo', 'redo'],
                        ['formatting'],
                        ['strong', 'em', 'del'],
                        ['superscript', 'subscript'],
                        ['link'],
                        ['insertImage'],
                        ['justifyLeft', 'justifyCenter', 'justifyRight', 'justifyFull'],
                        ['unorderedList', 'orderedList'],
                        ['horizontalRule'],
                        ['removeformat'],
                        ['uploadImage'],
                        ['fullscreen']

                    ]
                }
                id="editor"/>
        </FormGroup>
    );

[ChocolateSlayer]

Anybody solved this?

[badr-elouaddany]

Hello,

for the react version btnsDef isn't functioning properly, the optimal solution would be to create a personalized plugin. Here is an example.
`
(function ($) {
'use strict';

$.extend(true, $.trumbowyg, {
    langs: {
        // jshint camelcase:false
        en: {
            youtubeURL: 'Youtube',
        },
    }
});

function buildYouTubeURLnDef(trumbowyg) {
    return {
        fn: function () {

            trumbowyg.openModalInsert('Insert Youtube URL', {
                    url: {
                        label: 'Input YouTube URL',
                        forceCss: true,
                        type: 'text'
                    }
                },
                // callback
                function (values) {
                    const youtubeURL = values.url;
                    let regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=|\?v=)([^#\&\?]*).*/;
                    let match = youtubeURL.match(regExp);
                    if (match && match[2].length == 11) {
                        trumbowyg.execCmd('insertHTML', `<span>[[ youtubeVideo("${youtubeURL}") ]]</span>`);
                        return true;
                    } else {
                        alert('URL is not valid!');
                        return false;
                    }
                })
        },
        title: 'Youtube',
        ico: 'youtube'
    }
}

$.extend(true, $.trumbowyg, {
    plugins: {
        myplugin: {
            init: function (trumbowyg) {
                trumbowyg.o.plugins.myplugin = $.extend(true, {},
                    trumbowyg.o.plugins.myplugin || {}
                );
                trumbowyg.addBtnDef('youtubeURL', buildYouTubeURLnDef(trumbowyg));
            },
            // Return a list of button names which are active on current element
            tagHandler: function (element, trumbowyg) {
                return [];
            },
            destroy: function (trumbowyg) {
            }
        }
    }
});

})(jQuery);
`
Include the plugin in your component according to the instructions on the GitHub page https://github.com/RD17/react-trumbowyg#plugins.