Rich Text Editor Settings
Contents
11. Rich Text Editor Settings#
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,
],
};
11.1. Exercise#
Add a button to the toolbar to style a text selection as CODE
.
Solution
/**
* 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,
};