[MGNLUI-8115] Compare configuration of CK4 vs CK5 out of Magnolia Created: 12/Jun/23  Updated: 08/Dec/23  Resolved: 04/Jul/23

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

Type: Spike Priority: Neutral
Reporter: Dominik Maslanka Assignee: Quach Hao Thien
Resolution: Done Votes: 0
Labels: dx-core-6.3
Σ Remaining Estimate: Not Specified Remaining Estimate: Not Specified
Σ Time Spent: 2d Time Spent: 2d
Σ Original Estimate: Not Specified Original Estimate: Not Specified

Sub-Tasks:
Key
Summary
Type
Status
Assignee
MGNLUI-8116 Implementation Sub-task Completed Quach Hao Thien  
MGNLUI-8117 Sprint review Sub-task Closed  
Template:
Date of First Response:
Epic Link: CKEditor 5
Sprint: Nucleus 39
Story Points: 5
Team: Nucleus
Work Started:

 Description   

User Story: as a Magnolia developer, I would like to know how much effort it will take me to configure CK Editor 5 so that I can later describe this effort to the customer when there will be a need to adapt and switch from CK Editor 4 to CK editor 5

 

Context:

This is the last investigation ticket on CK5 Adaptation - output from it should be a better understanding how looks configuration of CK Editor 5 in comparison to CK Editor 4 out of Magnolia context.



 Comments   
Comment by Quach Hao Thien [ 23/Jun/23 ]

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:52:16 CET 2024 using Jira 9.4.2#940002-sha1:46d1a51de284217efdcb32434eab47a99af2938b.