[MGNLUI-8587] [DOC] Create simple process for the installation of CKE5 together with the rich text editor Created: 13/Dec/23  Updated: 01/Feb/24

Status: In Progress
Project: Magnolia UI
Component/s: None
Affects Version/s: None
Fix Version/s: None

Type: Task Priority: Neutral
Reporter: Dominik Maslanka Assignee: Adrian Brooks
Resolution: Unresolved Votes: 0
Labels: dx-core-6.3
Σ Remaining Estimate: Not Specified Remaining Estimate: Not Specified
Σ Time Spent: Not Specified Time Spent: Not Specified
Σ Original Estimate: Not Specified Original Estimate: Not Specified

Issue Links:
Relates
relates to MGNLUI-8592 [DOC] Create migration process for th... Closed
documentation
documents MGNLUI-8621 Customization of CKe5 (render CKE5 fr... Open
Sub-Tasks:
Key
Summary
Type
Status
Assignee
MGNLUI-8588 Implementation Sub-task To Do  
MGNLUI-8589 Review Sub-task To Do  
MGNLUI-8590 Pre-Integration QA Sub-task To Do  
MGNLUI-8591 QA Sub-task To Do  
Template:
Acceptance criteria:
Empty
Task DoR:
Empty
Epic Link: CKEditor 5
T-Shirt Size: Medium
Team: Nucleus
Work Started:

 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

https://ckeditor.com/docs/ckeditor5/latest/updating/ckeditor4/ckeditor4-configuration-compatibility.html

CKEditor 4 plugin equivalents

https://ckeditor.com/docs/ckeditor5/latest/updating/ckeditor4/ckeditor4-plugin-compatibility.html


Generated at Mon Feb 12 09:56:31 CET 2024 using Jira 9.4.2#940002-sha1:46d1a51de284217efdcb32434eab47a99af2938b.