Rich Text Editor Settings in DraftJS editor

Plone Frontend Chapter

This chapter is about customizing the rich text editor.

Description

Add a button and feature to the rich text editor DraftJS.

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

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

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

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

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,
    },
  },
};