38. Rich Text Editor Settings

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

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

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
import React from 'react';
import createInlineStyleButton from 'draft-js-buttons/lib/utils/createInlineStyleButton';
import Icon from '@plone/volto/components/theme/Icon/Icon';
import radiodisabledSVG from '@plone/volto/icons/radio-disabled.svg';

// Button
const DiscreetButton = createInlineStyleButton({
  style: 'DISCREET',
  children: <Icon name={radiodisabledSVG} size="24px" />,
});
let newbuttonset = config.settings.richTextEditorInlineToolbarButtons;
newbuttonset.splice(2, 0, DiscreetButton);

// Renderer
const customInline = {
  DISCREET: (children, { key }) => (
    <span key={key} className="discreet">
      {children}
    </span>
  ),
};

Complete code of the configuration in /src/config.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
import React from 'react';
import createInlineStyleButton from 'draft-js-buttons/lib/utils/createInlineStyleButton';
import Icon from '@plone/volto/components/theme/Icon/Icon';
import radiodisabledSVG from '@plone/volto/icons/radio-disabled.svg';

// Button
const DiscreetButton = createInlineStyleButton({
  style: 'DISCREET',
  children: <Icon name={radiodisabledSVG} size="24px" />,
});
let newbuttonset = config.settings.richTextEditorInlineToolbarButtons;
newbuttonset.splice(2, 0, DiscreetButton);

// Renderer
const customInline = {
  DISCREET: (children, { key }) => (
    <span key={key} className="discreet">
      {children}
    </span>
  ),
};

export const settings = {
  ...config.settings,
  richTextEditorInlineToolbarButtons: newbuttonset,
  ToHTMLRenderers: {
    ...config.settings.ToHTMLRenderers,
    inline: {
      ...config.settings.ToHTMLRenderers.inline,
      ...customInline,
    },
  },
};