Extensions & Integrations
Rich Text Enhancement
A bundle of two extensions for adding colors and fonts to text in the rich text editor.
>
npm i @bodonkey/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',
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:
//...
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'
}
]
}
}
}
}
}
//...