@bodonkey/rich-text-enhancement

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:

npm install @bodonkey/rich-text-enhancement

Usage

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

require('apostrophe')({
  shortName: 'my-project',
  bundle: [ '@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:

//...
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'
                }
              ]
            }
          }
        }
      }
    }
//...