Details
-
Task
-
Resolution: Unresolved
-
Neutral
-
None
-
None
-
None
-
Empty show more show less
-
Empty show more show less
-
Medium
Description
USer Story: As developer I would like to have easy way to introduce plugin to the rich text editor powered by CKE5 so that I don't have to put too much effort into installing pluggins
One of the challanges are that CKE5 introduced new way of customizing the editor. We need to introduce new process of customization so it will be adapted to new technology - until we will not deprecate CK4
Differentiate in configuration between CKEditor4 and CKEditor5
| CKEditor 4 | CKEditor 5 | |
|---|---|---|
| Toolbar configuration | Configure the toolbar by providing an array of toolbar item name or using a custom toolbar configuration objectExample:
CKEDITOR.replace('editor', { toolbar: [ { name: 'clipboard', items: ['Cut', 'Copy', 'Paste'] }, { name: 'editing', items: ['Undo', 'Redo'] }, { name: 'basicstyles', items: ['Bold', 'Italic', 'Underline'] }, // ... ] }); |
CKEditor 5 uses a different syntax for toolbar configuration. You can define toolbar item as an array of strings. Example:
ClassicEditor
.create(document.querySelector('#editor'), {
toolbar: [ 'bold', 'italic', 'underline', '|', 'undo', 'redo' ]
})
.catch(error => {
console.error(error);
});
|
| Plugins | CKEditor 4 uses an explicit plugin system, and you need to include and configure plugins in your configuration. Example:
CKEDITOR.replace('editor', { extraPlugins: 'codesnippet', codeSnippet_theme: 'monokai_sublime' }); |
CKEditor 5 has a more modular architecture, and you need to import and include plugins as part of the editor build. Example:
import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor'; import EssentialsPlugin from '@ckeditor/ckeditor5-essentials/src/essentials'; import BoldPlugin from '@ckeditor/ckeditor5-basic-styles/src/bold'; import ItalicPlugin from '@ckeditor/ckeditor5-basic-styles/src/italic'; //... ClassicEditor.create(document.querySelector('#editor'), { plugins: [ EssentialsPlugin, BoldPlugin, ItalicPlugin ], toolbar: [ 'bold', 'italic' ] }) .catch(error => { console.error(error); }); |
| Custom configuration | By default, CKEditor 4 loads its settings from the config.js file, but you can specify a custom configuration file. Example:
CKEDITOR.replace('editor', { customConfig: '/myconfig.js' }); |
CKEditor 5 does not have a separate configuration file like CKEditor 4. Instead, you pass the configuration object directly when creating the editor instance. |
CKEditor 4 configuration options compatibility
CKEditor 4 plugin equivalents
https://ckeditor.com/docs/ckeditor5/latest/updating/ckeditor4/ckeditor4-plugin-compatibility.html
Checklists
Attachments
Issue Links
- documents
-
MGNLUI-8621 Customization of CKe5 (render CKE5 from the new FieldFactory in MagnoliaUI)
-
- Open
-
- relates to
-
MGNLUI-8592 [DOC] Create migration process for the users with possible script blueprints
-
- Closed
-
1.
|
Implementation |
|
To Do | Unassigned |
2.
|
Review |
|
To Do | Unassigned |
3.
|
Pre-Integration QA |
|
To Do | Unassigned |
4.
|
QA |
|
To Do | Unassigned |