Skip to content

RichEditor Settings

Rich Text Editor Settings

You can customize how the Rich Text Editor behaves and its features. These are controlled from the config.js settings.

Adding an underline button feature

In this chapter we will learn how to change settings for the Rich Text Editor. We will add a button to the toolbar to underline the selected text.

In the config.js file we will create a new button.

import React from 'react';
import createInlineStyleButton from 'draft-js-buttons/lib/utils/createInlineStyleButton';
import Icon from '@plone/volto/components/theme/Icon/Icon';
import underlineSVG from '@plone/volto/icons/underline.svg';

const UnderlineButton = createInlineStyleButton({
  style: 'UNDERLINE',
  children: <Icon name={underlineSVG} size="24px" />,
});

Next we will add the button to the toolbar.

export const settings = {
  ...defaultSettings,
  richTextEditorInlineToolbarButtons: [
    UnderlineButton,
    ...defaultSettings.richTextEditorInlineToolbarButtons,
  ],
};

Add a code button feature

Add a button to the toolbar to style a text selection as CODE.

/**
* Add your config changes here.
* @module config
* @example
* export const settings = {
*   ...defaultSettings,
*   port: 4300,
*   listBlockTypes: {
*     ...defaultSettings.listBlockTypes,
*     'my-list-item',
*   }
* }
*/

import React from 'react';
import createInlineStyleButton from 'draft-js-buttons/lib/utils/createInlineStyleButton';
import Icon from '@plone/volto/components/theme/Icon/Icon';
import underlineSVG from '@plone/volto/icons/underline.svg';
import codeSVG from '@plone/volto/icons/code.svg';

import {
  settings as defaultSettings,
  views as defaultViews,
  widgets as defaultWidgets,
  tiles as defaultTiles,
} from '@plone/volto/config';

import { AlbumView, FullView, RatingWidget } from './components';

const UnderlineButton = createInlineStyleButton({
  style: 'UNDERLINE',
  children: <Icon name={underlineSVG} size="24px" />,
});

const CodeButton = createInlineStyleButton({
  style: 'CODE',
  children: <Icon name={codeSVG} size="24px" />,
});

export const settings = {
  ...defaultSettings,
  richTextEditorInlineToolbarButtons: [
    CodeButton,
    UnderlineButton,
    ...defaultSettings.richTextEditorInlineToolbarButtons,
  ],
};

export const views = {
  ...defaultViews,
  layoutViews: {
    ...defaultViews.layoutViews,
    album_view: AlbumView,
    full_view: FullView,
  },
};

export const widgets = {
  ...defaultWidgets,
  id: {
    ...defaultWidgets.id,
    rating: RatingWidget,
  },
};

export const tiles = {
  ...defaultTiles,
};