Froala editor

Editor customization

It is possible to configure the Froala using any of the as configuration option of the editor as documented on https://froala.com/wysiwyg-editor/docs/options. Below, you can find some examples of popular configuration options.

Toolbar buttons

It is possible to configure the toolbar buttons that are available on the WYSIWYG editor.

To change the buttons available, the following config file must be added or edited in the site folder:

templates/includes/backend/editors/config/richtext.html

{$config.toolbarButtons value=[

'moreText' => [

'buttons' => ['bold', 'italic', 'underline', 'strikeThrough', 'subscript', 'superscript', 'fontFamily', 'fontSize', 'textColor', 'backgroundColor', 'clearFormatting']

],

'moreParagraph' => [

'buttons' => ['alignLeft', 'alignCenter', 'formatOLSimple', 'alignRight', 'alignJustify', 'formatOL', 'formatUL', 'changeListStart', 'paragraphFormat', 'paragraphStyle', 'lineHeight', 'outdent', 'indent', 'quote']

],

'moreRich' => [

'buttons' => ['insertLink', 'insertImage', 'insertVideo', 'insertTable', 'emoticons', 'fontAwesome', 'math', 'specialCharacters', 'embedly', 'insertHR']

],

'moreMisc' => [

'buttons' => ['undo', 'redo', 'fullscreen', 'print', 'getPDF', 'spellChecker', 'selectAll', 'html', 'help'],

'align' => 'right',

'buttonsVisible' => 2

]

] scope="parent"}

Custom fonts

Additional fonts can be added to the richtext editor.

For this, the fonts need to be embedded in the admin panel and made available to the richtext editor. In the following example, Open Sans is added as font family.

templates/includes/backend/editors/config/richtext.html

{$config.fontFamily=[

'Arial,Helvetica,sans-serif' => 'Arial',

'Georgia,serif' => 'Georgia',

'Impact,Charcoal,sans-serif' => 'Impact',

'"Open Sans", sans-serif' => 'Open Sans',

'Tahoma,Geneva,sans-serif' => 'Tahoma',

'"Times New Roman",Times,serif' => 'Times New Roman',

'Verdana,Geneva,sans-serif' => 'Verdana'

] scope="parent" }

assets/backend/custom.css

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap');

Custom list

Additionally to the standard Froala options, it is possible to specify your own custom list for the richtext editor.

To add it you need to change the following:

templates/includes/backend/editors/config/richtext.html

{$customListOptions=[

'custom-list-georgian' => 'Georgian', 

'custom-list order-list-kannada' => 'Kannada'

] scope="parent" }

Where the key is a class applied to the <ul> tag, value ‒  the title. When you apply Kannada to some text the result is similar to

<ul class="custom-list order-list-kannada" style="list-style-type: unset;">
   <li>First</li>
   <li>Another one</li>
   <li>Last</li>
</ul>

Note, that list-style-type: unset is always added when you select any option; it is removed (along with a class) when you click on button directly.

You need to specify styles in two places:

assets/backend/custom.css

.custom-list-georgian {...}

.custom-list.order-list-kannada {...}

to make it visible in the admin panel when you create content, and somewhere in the styles in frontend, to make it visible when you render content.

When options are specified, the toolbarButtons.moreParagraph.buttons[] = 'customList'  is added automatically.