@lcompare javascript $('#editor') .trumbowyg({ btnsAdd: ['table'] });

Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

how to add plug-ins?

See original GitHub issue

Issue Description

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']
                ]
        }
});

Issue Analytics

State:
Created 7 years ago
Comments:14 (5 by maintainers)

Top GitHub Comments

6reactions

saggiyogeshcommented, Sep 1, 2016

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);

2reactions

ashleydbcommented, Jun 5, 2017

@lcompare

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