Aimeos offers a rich text HTML editor in the text panels for adding HTML formatting to short and long descriptions and currently, the CKEditor v4 Standard All Edition is used. This version comes with all standard plugins activated and all official plugins included, but deactivated. The standard configuration hides some buttons (e.g. "superscript", "subscript"), something to be aware of, when it comes to configuration.
CKEditor configuraton works since v2020.7.10-dev.
Aimeos.editorcfg = [ [ 'Undo', 'Redo' ], [ 'Link', 'Unlink', 'Anchor' ], [ 'Bold', 'Italic', 'Underline', 'Strike' ], [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote' ], [ 'SpecialChar' ], [ 'Source', '-', 'RemoveFormat' ] ]
This configuration will replace the existing Aimeos configuration and will be applied to all available text area fields in all text panels.
In order to make buttons like the text align options (JustifyLeft, JustifyCenter, JustifyRight, JustifyBlock) visible, you have to add a plugin to the editorExtraPlugins option, in this case the justify plugin:
Aimeos.editorExtraPlugins = 'divarea,justify'
Now the text align options will be visible.
The default configuration contains
divarea to render the CKEditor in a
div tag instead of an
iframe. We recommend to keep that plugin to avoid problems!
Allow HTML tags#
By default, CKEditor's allowed content rules are used with the addition of those tags listed in the
Aimeos.editortags configuration, which are assigned to CKEditor's extraAllowedContent setting. The Aimeos standard configuration is:
Aimeos.editortags = 'div(*);span(*);p(*);';
Aimeos.editortags option enables you to configure more tags which are allowed in the source view, replace them by your own list or remove them completely. The format of the setting must be the tag name, followed by the list of CSS classes in round brackets or "*" for all classes. Each tags/class combination must contain a semicolon at the end. Don't use spaces anywhere in the string!
Show more buttons#
If you wish to activate certain buttons, e.g. for super- and/or subscript, or add e.g. text align options, extend your configuration like this:
Aimeos.editorcfg = [ [ 'Undo', 'Redo', 'Anchor' ], [ 'Link', 'Unlink' ], [ 'JustifyLeft', 'JustifyCenter', 'JustifyRight' ], [ 'Bold', 'Italic', 'Underline', 'Strike', 'Superscript', 'Subscript' ], [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote' ], [ 'SpecialChar' ], [ 'Source', '-', 'RemoveFormat' ] ]
This would only be the first step, though, since neither the text align nor the super-/subscript buttons would be available/visible yet. This is due to the fact that the CKEditor v4 Standard Edition disables additional plugins by default as well as removes some buttons.
The buttons for "Underline", "Superscript" and "Subscript" are not visible, because the CKEDITOR v4 Standard Edition removes them by default. You can change the list of buttons using the
Aimeos.editorRemoveButtons setting. The default configuration in Aimeos is:
Aimeos.editorRemoveButtons = 'Underline,Subscript,Superscript';
The button names must be separated by comma. To show all buttons, set the configuration option to an empty string:
Aimeos.editorRemoveButtons = '';
There's a complete list of CKEditor button names available for reference.