Better documentation for toolbar customisation

[adityamehta97]

Would be quite good to have more comprehensive documentation for how to configure the toolbar.

I want to add the alignment buttons that are available in the demo, however I am not able to figure out which button group that belongs to / how to add them.

Any help on this is much appreciated!

[nachozullo]

Hi @adityamehta97, I agree with you that would be good to have more comprehensive documentation about toolbarConfig.

I found here the EditorToolbarConfig.js file that could help you.

If you need to add the alignment buttons, you need to add 'BLOCK_ALIGNMENT_BUTTONS' in the display array and also add the buttons:

BLOCK_ALIGNMENT_BUTTONS: [
  {label: 'Align Left', style: 'ALIGN_LEFT'},
  {label: 'Align Center', style: 'ALIGN_CENTER'},
  {label: 'Align Right', style: 'ALIGN_RIGHT'},
  {label: 'Align Justify', style: 'ALIGN_JUSTIFY'},
] 

[zilkenberg22]

@nachozullo i'm using const toolbarConfig = { display: ['INLINE_STYLE_BUTTONS', 'BLOCK_ALIGNMENT_BUTTONS', 'BLOCK_TYPE_BUTTONS'], INLINE_STYLE_BUTTONS: [ { label: 'Bold', style: 'BOLD' }, { label: 'Italic', style: 'ITALIC' }, { label: 'Strikethrough', style: 'STRIKETHROUGH' }, { label: 'Monospace', style: 'CODE' }, { label: 'Underline', style: 'UNDERLINE' }, ], BLOCK_ALIGNMENT_BUTTONS: [ { label: 'Align Left', style: 'ALIGN_LEFT' }, { label: 'Align Center', style: 'ALIGN_CENTER' }, { label: 'Align Right', style: 'ALIGN_RIGHT' }, { label: 'Align Justify', style: 'ALIGN_JUSTIFY' }, ], BLOCK_TYPE_BUTTONS: [ { label: 'UL', style: 'unordered-list-item' }, { label: 'OL', style: 'ordered-list-item' }, { label: 'Blockquote', style: 'blockquote' }, ] };

but not working BLOCK_ALIGNMENT_BUTTONS

[PrabhatO]

@nachozullo i'm using const toolbarConfig = { display: ['INLINE_STYLE_BUTTONS', 'BLOCK_ALIGNMENT_BUTTONS', 'BLOCK_TYPE_BUTTONS'], INLINE_STYLE_BUTTONS: [ { label: 'Bold', style: 'BOLD' }, { label: 'Italic', style: 'ITALIC' }, { label: 'Strikethrough', style: 'STRIKETHROUGH' }, { label: 'Monospace', style: 'CODE' }, { label: 'Underline', style: 'UNDERLINE' }, ], BLOCK_ALIGNMENT_BUTTONS: [ { label: 'Align Left', style: 'ALIGN_LEFT' }, { label: 'Align Center', style: 'ALIGN_CENTER' }, { label: 'Align Right', style: 'ALIGN_RIGHT' }, { label: 'Align Justify', style: 'ALIGN_JUSTIFY' }, ], BLOCK_TYPE_BUTTONS: [ { label: 'UL', style: 'unordered-list-item' }, { label: 'OL', style: 'ordered-list-item' }, { label: 'Blockquote', style: 'blockquote' }, ] };

but not working BLOCK_ALIGNMENT_BUTTONS

same for me, did it resolve ?

[IamAhsanMani]

Hi @adityamehta97, I agree with you that would be good to have more comprehensive documentation about toolbarConfig.

I found here the EditorToolbarConfig.js file that could help you.

If you need to add the alignment buttons, you need to add 'BLOCK_ALIGNMENT_BUTTONS' in the display array and also add the buttons:

BLOCK_ALIGNMENT_BUTTONS: [
  {label: 'Align Left', style: 'ALIGN_LEFT'},
  {label: 'Align Center', style: 'ALIGN_CENTER'},
  {label: 'Align Right', style: 'ALIGN_RIGHT'},
  {label: 'Align Justify', style: 'ALIGN_JUSTIFY'},
] 

@nachozullo can we add "direction:rtl" in inline style attribute when click "align right" button?

[akhil-sage]

BLOCK_ALIGNMENT_BUTTONS: [ { label: 'Align Left', style: 'ALIGN_LEFT' }, { label: 'Align Center', style: 'ALIGN_CENTER' }, { label: 'Align Right', style: 'ALIGN_RIGHT' }, { label: 'Align Justify', style: 'ALIGN_JUSTIFY' }, ],

BLOCK_ALIGNMENT_BUTTONS still not working. Any Solutions ?