Trumbowyg: how to add plug-ins?

[trawen]

I copy sample from your demo site. But it not work (not show drop-down menu on image button).
http://krestovskyisland.ru/index.html

what am I doing wrong?

<script src="js/trumb/plugins/upload/trumbowyg.upload.min.js"></script>
<script src="js/trumb/plugins/pasteimage/trumbowyg.pasteimage.min.js"></script>
        <script>
            /** Default editor configuration **/

            $('#editor').trumbowyg({

                plugins: {
                btnsDef: {
                    // Customizables dropdowns
                    image: {
                        dropdown: ['insertImage', 'upload'],
                        ico: 'insertImage'
                    }
                },
                btns: [
                    ['viewHTML'],
                    ['undo', 'redo'],
                    ['formatting'],
                    'btnGrp-design',
                    ['link'],
                    ['image'],
                    'btnGrp-justify',
                    'btnGrp-lists',
                    ['foreColor', 'backColor'],
                    ['preformatted'],
                    ['horizontalRule'],
                    ['fullscreen']
                ]
        }
});

[Alex-D]

Hi!

I think your have fail your copy/paste, because that's the code of the demo, and I think you've copy the wrong plugin key. https://github.com/Alex-D/Trumbowyg/blob/gh-pages/js/main.js#L9

The whole configuration used in demo is:

$('.editor').trumbowyg({
    btnsDef: {
        // Customizables dropdowns
        image: {
            dropdown: ['insertImage', 'upload', 'base64', 'noEmbed'],
            ico: 'insertImage'
        }
    },
    btns: [
        ['viewHTML'],
        ['undo', 'redo'],
        ['formatting'],
        'btnGrp-design',
        ['link'],
        ['image'],
        'btnGrp-justify',
        'btnGrp-lists',
        ['foreColor', 'backColor'],
        ['preformatted'],
        ['horizontalRule'],
        ['fullscreen']
    ],
    plugins: {
        // Add imagur parameters to upload plugin
        upload: {
            serverPath: 'https://api.imgur.com/3/image',
            fileFieldName: 'image',
            headers: {
                'Authorization': 'Client-ID 9e57cb1c4791cea'
            },
            urlPropertyName: 'data.link'
        }
    }
});

[saggiyogesh]

There is no documentation on How to create and add new plugins.

[Alex-D]

Check demo page code or in exemples folder.

[saggiyogesh]

@Alex-D
To create new plugin, need to check the source of existing plugins, which is somewhat time taking & hit - trial process. It would be better if there'll any docs for same.

[Alex-D]

Yep, there is some issues about that and there are open.
Here : https://github.com/Alex-D/Trumbowyg/issues/205
And here : https://github.com/Alex-D/Trumbowyg/issues/114

So I know, but I don't have the time yet. There is lot of simple exemples. If I wrote a doc, It should be at start a copy paste, so just read this code :)

[saggiyogesh]

I have written some short snippet to create a new plugin.

//basic template to create new plugin
(function($) {
  'use strict';

  $.extend(true, $.trumbowyg, { //extend `$.trumbowyg` 
    //localization object
    // `foreColor` & `backColor` are new btns / functionality 
    langs: {
      cs: {
        foreColor: 'Barva textu',
        backColor: 'Barva pozadí'
      },
      en: {
        foreColor: 'Text color',
        backColor: 'Background color'
      },
      fr: {
        foreColor: 'Couleur du texte',
        backColor: 'Couleur de fond'
      },
      sk: {
        foreColor: 'Farba textu',
        backColor: 'Farba pozadia'
      },
      zh_cn: {
        foreColor: '文字颜色',
        backColor: '背景颜色'
      }
    },

    plugins: { // required plugins object
      color: { // plugin name
        init: function(trumbowyg) { //init function, called when plugin is initialized.
           //`trumbowyg` editor instance.

          const btnDef = {
            fn: function(cmd) { 
              //`fn` function is callback when button is clicked in editor. 
              //`cmd` is button type clicked. 
              // In this case, it could be `foreColor` or `backColor` 

              /**
               * This command is used to execute command. 
               * In this case, color is applied on selected text in editor. 
               * trumbowyg.execCmd(cmd, #000000)
               */
            }
          };

          //adding buttons in editor
          trumbowyg.addBtnDef('foreColor', btnDef);
          trumbowyg.addBtnDef('backColor', btnDef);
        }
      }
    }
  });
})(jQuery);

[rushikeshraut]

@saggiyogesh Can you please help me out to create plugin for inserting table, when I hover on button it should show a grid structure (just like in ms-word)

[Alex-D]

https://github.com/Alex-D/Trumbowyg/tree/develop/plugins/table
There already exists a table plugin.

Use this one in production: https://github.com/Alex-D/Trumbowyg/blob/master/dist/plugins/table/trumbowyg.table.min.js

[btbjosh]

Am I missing something? I don't see anywhere in the docs (which are beautiful btw ;) ) how to actually add these plugins to my editor? I see they came in the /plugins folder in my npm module folder... how do I load/add them?

[Alex-D]

You can check here: https://github.com/Alex-D/Trumbowyg/tree/develop/examples/plugins

[lukepolo]

require('./../../../node_modules/trumbowyg/plugins/table/trumbowyg.table')

[lcompare]

Hey Alex,

Could you please explain how to use a plugin?
The one I am trying to use is the table plugin.

I can't find anywhere an explanation on how to do it.

Thanks!

[ashleydb]

@lcompare

        <script src="../../dist/trumbowyg.js"></script>
        <script src="../../dist/plugins/table/trumbowyg.table.js"></script>
        <script>
            $('#editor')
            .trumbowyg({
                btnsAdd: ['table']
            });
        </script>

[gdefraiteur]

Well i tried and i dont have any additionnal table button showing up.

edit: Ok, well, in case someone try to do it, and installed from npm and bower, the trumbowyg.js you ll get wont implement usage of 'btnsAdd', so you got to add a little fix:

        if (options.btns) {
            t.o.btns = options.btns;
        } 
    else if (options.btnsAdd)
    {
        var res = [];
        for (var i = 0; i < options.btnsAdd.length; i++)
        {
            res.push(options.btnsAdd[i]);   
        }
        for (var i = 0; i < t.o.btns.length; i++)
        {
            res.push(t.o.btns[i]);  
        }
        t.o.btns = res;
    }
    else if (!t.o.semantic) {
        t.o.btns[4] = 'btnGrp-design';
        }