Search code examples
javascriptangular6editorfroala

Froala editor disable a button in dropdown?

I am using Froala editor in . my application, I want to disable a button in the dropdown of froala editor toolbar.

I have added an option to allow user to align content inside the editor, but I want to disable the 4th(Justify) option in align dropdown in toolbar, keeping only three options (left, centre, right).

FROALA_TOOLBAR_OPTIONS_FLASHCARDS = ['bold', 'italic', 'underline', 'color', '-',
        'formatOL', 'formatUL', 'insertImage', 'align'
    ];

I have tried searching through the docs. but didn't found anything useful that will allow me to disable the 4th option in align dropdown in froala toolbar.

enter image description here

Solution

  • Use the JSFiddle - https://jsfiddle.net/hp0rsq52/

    FroalaEditor.DefineIcon('custom_align', {NAME: 'cog', SVG_KEY: 'cogs'});
FroalaEditor.RegisterCommand('custom_align', {
  title: 'Advanced options',
  type: 'dropdown',
  focus: false,
  undo: true,
  refreshAfterCallback: true,
  options: {
    'v1': 'left',
    'v2': 'center',
    'v3': 'right'
  },
    callback: function (cmd, val) {
    if (val == 'v1')
    {
      this.align.apply('left');
    }
    if (val == 'v2')
    {
      this.align.apply('center');
    }
    if (val == 'v3')
    {
      this.align.apply('right');
    }
  },

});

new FroalaEditor('div#froala-editor', {
   scaytCustomerId: '1:YjSV32-KWqTc2-AICoL3-WHiWO1-gYWRJ1-T1Cye3-Z9BJX3-YoRKY2-Icrlm-FMisd4-B26CZ3-SK3',
  toolbarButtons: [['undo', 'redo' , 'bold'], ['alert', 'clear', 'insert','custom_align']]
})