Rich Text Editor Settings in DraftJS editor#

Warning

This chapter is for DraftJS editor. Since Volto 16 the default editor is Slate.

A well written chapter in Plone documentation does describe how to enhance the Slate editor: How to write a Slate editor plugin

The rich text editor lets editors make text bold, italic and more. This chapter is about adding an additional button to the editor toolbar to make text lighter.

To be solved task in this part:

  • Enrich text editor

In this part you will:

  • Learn about configuration of your Volto app in general.

Topics covered:

  • Configuration of a Volto app

  • Rich text editor DraftJS

mark text as discreet / mark text with a style via css class name
text marked as discreet

The settings in /src/config.js is the place to modify the general configuration of your Volto app. Here we add info about the additional button, what to display in the editor bar and what to do when the button is clicked.

/src/config.js

 1config.settings = {
 2  ...config.settings,
 3  richTextEditorInlineToolbarButtons: newbuttonset,
 4  ToHTMLRenderers: {
 5    ...config.settings.ToHTMLRenderers,
 6    inline: {
 7      ...config.settings.ToHTMLRenderers.inline,
 8      ...customInline,
 9    },
10  },
11}

You see that two attributes of the overall settings, richTextEditorInlineToolbarButtons and ToHTMLRenderers, are overwritten. We define these attributes to show a button which lets the editor add a CSS class discreet to a selected phrase.

/src/config.js

 1import createInlineStyleButton from 'draft-js-buttons/lib/utils/createInlineStyleButton';
 2import Icon from '@plone/volto/components/theme/Icon/Icon';
 3import radiodisabledSVG from '@plone/volto/icons/radio-disabled.svg';
 4
 5// Button
 6const DiscreetButton = createInlineStyleButton({
 7  style: 'DISCREET',
 8  children: <Icon name={radiodisabledSVG} size="24px" />,
 9});
10let newbuttonset = config.settings.richTextEditorInlineToolbarButtons;
11newbuttonset.splice(2, 0, DiscreetButton);
12
13// Renderer
14const customInline = {
15  DISCREET: (children, { key }) => (
16    <span key={key} className="discreet">
17      {children}
18    </span>
19  ),
20};
Complete code of the configuration
 1import React from 'react';
 2import createInlineStyleButton from 'draft-js-buttons/lib/utils/createInlineStyleButton';
 3import Icon from '@plone/volto/components/theme/Icon/Icon';
 4import radiodisabledSVG from '@plone/volto/icons/radio-disabled.svg';
 5
 6// Button
 7const DiscreetButton = createInlineStyleButton({
 8  style: 'DISCREET',
 9  children: <Icon name={radiodisabledSVG} size="24px" />,
10});
11let newbuttonset = config.settings.richTextEditorInlineToolbarButtons;
12newbuttonset.splice(2, 0, DiscreetButton);
13
14// Renderer
15const customInline = {
16  DISCREET: (children, { key }) => (
17    <span key={key} className="discreet">
18      {children}
19    </span>
20  ),
21};
22
23export const settings = {
24  ...config.settings,
25  richTextEditorInlineToolbarButtons: newbuttonset,
26  ToHTMLRenderers: {
27    ...config.settings.ToHTMLRenderers,
28    inline: {
29      ...config.settings.ToHTMLRenderers.inline,
30      ...customInline,
31    },
32  },
33};