Try the demoGet Started
  • Community Extension
Rich Text Enhancement

README (opens in new tab)

ApostropheCMS logo

Rich Text Enhancement

This bundle of two extensions for adding colors and fonts to text in the rich text editor.

Installation

To install the module, use the command line to run this command in an Apostrophe project's root directory:

bash
npm install @bodonkey/rich-text-enhancement

Usage

Add the bundle and individual extensions in the app.js file:

javascript
require('apostrophe')({ shortName: 'my-project', bundles: [ '@bodonkey/rich-text-enhancement' ], modules: { 'rich-text-color': {}, 'rich-text-font': {} } });

These enhancements can then be added to the project-wide or individual area rich-text-widget options.

Per-area example:

javascript
//... fields: { add: { main: { type: 'area', options: { widgets: { '@apostrophecms/rich-text': { toolbar: [ 'styles', '|', 'bold', 'italic', 'strike', 'link', '|', 'bulletList', 'orderedList', 'alignRight', 'highlight', // add the color picker to the toolbar 'colorButton', // add the font selector to the toolbar 'fontSelector' ], styles: [ { tag: 'p', label: 'Paragraph (P)' }, { tag: 'h3', label: 'Heading 3 (H3)' }, { tag: 'h3', label: 'Heading 3 (H3) - Custom', class: 'centered' }, { tag: 'h4', label: 'Heading 4 (H4)' } ], insert: [ 'table', 'image' ], // Add font selection - these need to be made available // from your stylesheet or system fonts fonts: [ { label: 'Arial', value: 'Arial' }, { label: 'Courier New', value: 'Courier New' }, { label: 'Georgia', value: 'Georgia' }, { label: 'Tahoma', value: 'Tahoma' }, { label: 'Times New Roman', value: 'Times New Roman' }, { label: 'Verdana', value: 'Verdana' } ] } } } } } //...

Screenshot of the two new enhancements added to the Rich Text Widget toolbar.