Uploaded image for project: 'Magnolia UI'
  1. Magnolia UI
  2. MGNLUI-8587

[DOC] Create simple process for the installation of CKE5 together with the rich text editor

    XMLWordPrintable

Details

    • Task
    • Resolution: Unresolved
    • Neutral
    • None
    • None
    • None

    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

      Checklists

        Acceptance criteria

        Attachments

          Issue Links

            1.
            Implementation Sub-task To Do Unassigned
            2.
            Review Sub-task To Do Unassigned
            3.
            Pre-Integration QA Sub-task To Do Unassigned
            4.
            QA Sub-task To Do Unassigned

            Activity

              People

                abrooks Adrian Brooks
                dmaslanka Dominik Maslanka
                Nucleus
                Votes:
                0 Vote for this issue
                Watchers:
                1 Start watching this issue

                Dates

                  Created:
                  Updated:
                  Work Started:

                  Checklists

                    Task DoR