CKEditor 5
This document is providing information on how to configure, integrate and extend CKEditor 5 in Jahia. It explains how to work with the configuration file, how to create custom toolbars, how to apply custom toolbars to specific sites, permissions or content types among other things.
CKEditor 5 Installation
CK5 is available as a module. You can download it from the Jahia Store.
Please note that CKEditor 5 will completely replace CKEditor 4 in a later version of Jahia, but for the time being both CK4 and CK5 can run at the same time on a Jahia environment. We’ve maintained this possibility to ease our customers' transition and training process of their users.
Customers have to know that CK4 is not supported anymore by its vendor, hence no bug fixes will be provided on this version, except for the parts that are specific to Jahia, if they are security related.
CKEditor 5 settings and scope
Once the CK5 module is started, every new website created on the platform will use CK5 by default. All previously existing websites are automatically added in a list of exclusions, to let users continue to use CK4 and not force any change on the platform.
To activate CK5 on a pre-existing website, the first thing to do is to remove this site from the exclude list in the cfg file.
Configurations
A configuration is the name given to a specific CK5 toolbar. Each configuration defines features that can be built-in CK5 or provided by plug-ins. Jahia provides four configurations aiming to satisfy most editorial teams; to ease maintenance and governance those configurations cannot be modified.Customers can create and deploy their own configurations if the ones provided by Jahia do not match their needs.
Configuration registration
The goal of this section is to give a good understanding of how configurations are registered and where they are kept in order to make them accessible.
CKEditor 5 related registrations can be found in the registry under three types:
- @jahia/ckeditor5
- ckeditor5-config
- ckeditor5-plugins
@jahia/ckeditor5 is used to make accessible defineConfig functionality which allows you to register your own config. You can access it directly from registry as follows:
// 1. Define custom configuration
const myCustomConfig = {
plugins: ...,
toolbar: ...,
}
// 2. Define with a configuration name in the UI registry using `defineConfig` helper function
const ckeditor5 = window.jahia.uiExtender.registry.get('@jahia/ckeditor5', 'shared');
ckeditor5.defineConfig('customConfig', myCustomConfig);
Note that if you are working on a module leveraging Jahia UI extensions tech stack, you can import and use registry from @jahia/ui-extender package instead of accessing it from the window. See this page on how to get your module set up.
ckeditor5-config is a type we use for all configurations available for CK 5. When you register your configuration using the method described above it will be available for your specific key under this type.
By default Jahia comes with four configurations:
- Complete
- Advanced
- Light
- Minimal
Note : advanced configuration is the same as complete with the exception of menuBar visibility.
Light and Minimal configurations will have reduced toolbars.
ckeditor5-plugins is a type used to distinguish CK 5 plugin registrations. Similarly to ckeditor5-config type your plugin registrations will be found under that type.
Here’s how you can quickly define a simple custom config by relying on existing registrations to avoid importing a lot of custom classes:
// 1. Get and call defineConfig helper from registry
window.jahia.uiExtender.registry.get('@jahia/ckeditor5', 'shared').defineConfig('customConfig', {
plugins:
// 2. Get plugins for “complete” configuration and use them in customConfig
window.jahia.uiExtender.registry.get('ckeditor5-plugins', 'complete').plugins,
// 3. Get “minimal” configuration and override its toolbar
...window.jahia.uiExtender.registry.get('ckeditor5-config', 'minimal'),
toolbar: {
items: [
'bold'
],
shouldNotGroupWhenFull: true
}
})
This configuration will have an extremely minimal toolbar with just the bold button in it.
Note how I rely on existing config and plugin registration to avoid registering all necessary items myself.
For this example I do this registration directly from registerExtension.js file which is the mechanism available out of the box in Jahia 8.
One important note is the target priority. CK 5 configs are registered with jahiaApp-init:99 target-priority, which means my registration needs to come after so I defined it as jahiaApp-init:99.5.
window.jahia.uiExtender.registry.add('callback', 'test-ckeditor5-configExample', {
targets: ['jahiaApp-init:99.5'],
callback: function () {... your registration here}})
Applying configuration
This section demonstrates the ways in which CK 5 configuration can be applied in Jahia.
Configuration file
Configuration file allows you to have control over what configuration is displayed on what site and under what conditions.
Reminder : by default when CK 5 module is deployed it will be applicable on all sites, however, existing sites will be excluded to prevent potential conflicts with CK 4. You can choose to include or exclude sites by editing configuration. . This can be useful if you have plugins that work only with CK 4 and are required for a specific site for example.
includeSites:
- site1
- site2
excludeSites:
- site3
- site4
Ensure that the target site is not listed under excludeSites when modifying other sections of the configuration file.
There are several ways to apply specific configuration:
- Global - Configuration can be applied across all sites
- Site-specific - Configuration can be applied only to specific sites
- Permission-based - can be combined with 1 or 2 to determine if configuration can be applied
Global configuration can be applied simply by adding the name of the configuration in the configs list::
configs:
- name: “yourConfig”
This will apply a config named yourConfig to all sites. Note that you still need to follow the steps in the first section to define your configuration.
To apply configuration to specific sites, add an optional siteKeys list:
configs:
- siteKeys:
- siteKey1
- siteKey2
name: "yourConfig"
If you want to check for permission add an optional permission parameter:
configs:
- siteKeys:
- siteKey1
- siteKey2
name: "yourConfig"
permission: "myPermission"
Note that the configuration order is important. Configurations that have site keys will be looked at first and the first one that satisfies all configuration requirements will be used. This makes it important to order the configuration list carefully, so that a user with broader permissions (e.g., an editor) is not matched to a configuration intended for a more restricted role (e.g., a reviewer). . Configurations without site keys will be looked at after, but if permission is added the one which first passes permission check will still be used. For example, if you add a configuration with just name and after one with name and permission the latter one will never be used as the former one will always apply.
As a rule, it is recommended to list the configurations from the most specific first, down to the most generic at the bottom.
CND configuration
Configuration can also be defined at the CND level. In this case, the configuration is applied directly to the specified field within the content definition.
[jnt:customArticle] > jnt:content, jmix:mainResource, jmix:siteComponent, jmix:droppableContent
- abstract (string, richtext[ckeditor.customConfig='yourConfig'])
Note: CND-level configuration does not support additional restrictions using permissions or site keys. The specified configuration is always applied directly to the field.
JSON overrides
Another way to apply configuration is by using a JSON override. JSON override can be deployed with a module, it could be your template-set for example.
To do so, you need to create a file under META_INF/jahia-content-editor-forms/fiedlsets with the following content:
{
"name": "jnt:customArticleOverride",
"priority": 1.1,
"fields": [
{
"name": "abstract",
"selectorOptionsMap": {
"ckeditor": {
"customConfig": "yourConfig"
}
}
}
]
}
This will apply yourConfig to the abstract field on the jnt:customArticleOverride definition.
Order of application
A few words about the order of application. Configurations defined in the configuration file will have lower priority than the ones defined at the CND level and JSON overrides will have the ability to change configuration at the CND level.
What’s included
In this section I will show what we packaged by default. It should give you a good idea about plugins available and configurations for lists, headings, images etc. supplied out of the box.
Plugins
Below you will find the list of plugins included with the complete configuration.
Alignment,
Autoformat,
BlockQuote,
Bold,
Bookmark,
CaseChange,
Clipboard,
Code,
CodeBlock,
List,
ListProperties,
Essentials,
FindAndReplace,
FontBackgroundColor,
Font,
FontColor,
FontFamily,
FontSize,
Fullscreen,
GeneralHtmlSupport,
Heading,
HorizontalLine,
Image,
ImageCaption,
ImageResize,
ImageStyleEmbed,
ImageStyle,
ImageToolbar,
ImageUpload,
Indent,
IndentBlock,
InsertJahiaImage,
Italic,
JahiaLinkProvider,
JahiaUpload,
Link,
LinkImage,
List,
Paragraph,
PasteFromOffice,
PasteFromOfficeEnhanced,
Picker,
RemoveFormat,
SourceEditingEnhanced,
ShowBlocks,
Strikethrough,
Style,
SpecialCharacters,
SpecialCharactersEssentials,
Table,
TableCellProperties,
TableColumnResize,
TableProperties,
TableToolbar,
Template,
TextTransformation,
Underline
Editor config
Below is the editor configuration for the complete profile.
{
plugins, // See above
toolbar: {
items: [
'undo',
'redo',
'sourceEditingEnhanced',
'showBlocks',
'fullScreen',
'|',
'heading',
'style',
'|',
'bold',
'italic',
'removeFormat',
'|',
'alignment',
'|',
'insertJahiaImage',
'link',
'bookmark',
'insertTable',
'|',
'bulletedList',
'numberedList',
'indent',
'outdent'
],
// Set to true to wrap the toolbar items
// Set to false if we want to group items
shouldNotGroupWhenFull: true
},
menuBar: {
isVisible: true
},
heading: {
options: [
{model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph'},
{model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2'},
{model: 'heading3', view: 'h3', title: 'Heading 3', class: 'ck-heading_heading3'},
{model: 'heading4', view: 'h4', title: 'Heading 4', class: 'ck-heading_heading4'}
]
},
language: 'en',
image: {
resizeUnit: 'px',
toolbar: [
'linkImage',
'|',
'toggleImageCaption',
'imageTextAlternative',
'|',
'imageStyle:inline',
'imageStyle:alignCenter',
'imageStyle:wrapText',
'|',
'resizeImage:original',
'resizeImage:custom'
]
},
table: {
contentToolbar: [
'tableColumn',
'tableRow',
'mergeTableCells',
'tableCellProperties',
'tableProperties'
]
},
htmlSupport: {
allow: [
{
name: /.*/,
attributes: true,
classes: true,
styles: true
}
]
},
list: {
properties: {
styles: true,
startIndex: true,
reversed: false
}
},
link: {
toolbar: ['editLink', 'linkProperties', 'unlink'],
defaultProtocol: 'https://',
decorators: {
openInNewTab: {
mode: 'manual',
label: 'Open in a new tab',
defaultValue: false,
attributes: {
target: '_blank',
rel: 'noopener noreferrer'
}
}
}
}
}
Features covered by the Jahia-CKEditor licence
The embedded version of CKEditor 5 includes a licence that covers the Essential features + Productivity features + AI Assistant features.
Not all the features supported in those packages are integrated in the Jahia provided toolbars, because we’ve made choices to provide default configurations that can match most of customers needs and avoid overcrowded toolbars. As a customer, you can create our own toolbars / configurations and make available any feature covered by the licence that is not displayed by default jahia toolbars. The CK5 builder tool can help you discover the available features and create your own configurations.
Collaboration features are not covered by this licence, neither File management (that are directly offered by Jahia itself), nor Conversion and Embedding features.
Integrating other CKEditor features
It is easy to integrate other CKEditor features into your workflow. All you have to do is create a configuration object, register it and specify which site or field this configuration should apply to as described in the sections above.
One easy and fun integration to try is the new AI feature available in CKEditor 5. You can also try to integrate styling options like text fonts, size and colors for instance. Those capabilities have not been integrated in the default toolbars because the html generated is heavier (lots of in-line styling and span tags added) and most of our customers tend to limit those kinds of options in order to keep control on the final look and feel and for accessibility reasons.