search

sstur / react-rte

Pure React rich text WYSIWYG editor based on draft-js.
https://react-rte.org
ISC License
2.86k stars 428 forks source link

Better documentation for toolbar customisation #384

Open adityamehta97 opened 4 years ago

adityamehta97 commented 4 years ago

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!

Screenshot 2020-10-11 at 3 55 32 PM
nachozullo commented 3 years ago

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 commented 3 years ago

@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 commented 2 years ago

@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 commented 1 year ago

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 commented 1 year ago

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 ?