Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to add custom button to react-trumbowyg? #17

Open
nllsdfx opened this issue Nov 6, 2018 · 2 comments
Open

How to add custom button to react-trumbowyg? #17

nllsdfx opened this issue Nov 6, 2018 · 2 comments

Comments

@nllsdfx
Copy link

nllsdfx commented Nov 6, 2018

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
Copy link

Anybody solved this?

@badr-elouaddany
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants