Ckeditor5-angular: How to add the Underline plugin to the ClassicEditor build in the Angular integration?

[Eyegabry99]

📝 Provide detailed reproduction steps (if any)

1. I downloaded the classic build of CKEditor 5 and integrated it into my angular application
2. There isn't any underline plugin so i decided to install it following this guide https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/installing-plugins.html
3. Did all of this steps and run my application

✔️ Expected result

What is the expected result of the above steps?
A working editor with underline option

❌ Actual result

What is the actual result of the above steps?
An editor without the underline option

📃 Other details

• Browser: Chrome
• OS: Windows 10
• CKEditor version: 5
  

  * Installed CKEditor plugins: Underline

If you'd like to see this fixed sooner, add a 👍 reaction to this post.

[ma2ciek]

Hi @Eyegabry99!

I transferred your issue.

Please, show the editor configuration you used for the <ckeditor> component.

[ma2ciek]

Hi @Eyegabry99,

Please, don't use screenshots in the bug reports as they aren't useful for anybody trying to help you (they could be helpful only when they would present UI bugs, not the source code). Could you change your post and paste the code instead?

[Eyegabry99]

Yeah sorry @ma2ciek
component.ts
Import of my ckeditor
import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic';
Editor configuration

public Editor = ClassicEditor;
  optionsNews = {
    toolbar: [
      'bold', 'italic', 'underline', 'subscript', 'superscript'
    ],
  };

public editorsReady(editor) {
      editor.ui.getEditableElement().parentElement.insertBefore(
        editor.ui.view.toolbar.element,
        editor.ui.getEditableElement()
      );
  }

component.html
<ckeditor (ready)="editorsReady($event)" [editor]="Editor" [formControl]="editNewsEvent.controls['corpoNews']" id="corpoNews" name="corpoNews" [config]="optionsNews"></ckeditor>

ckeditor.js

/**
 * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
 * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
 */

// The editor creator to use.
import ClassicEditorBase from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';

import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
import UploadAdapter from '@ckeditor/ckeditor5-adapter-ckfinder/src/uploadadapter';
import Autoformat from '@ckeditor/ckeditor5-autoformat/src/autoformat';
import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
import BlockQuote from '@ckeditor/ckeditor5-block-quote/src/blockquote';
import CKFinder from '@ckeditor/ckeditor5-ckfinder/src/ckfinder';
import EasyImage from '@ckeditor/ckeditor5-easy-image/src/easyimage';
import Heading from '@ckeditor/ckeditor5-heading/src/heading';
import Image from '@ckeditor/ckeditor5-image/src/image';
import ImageCaption from '@ckeditor/ckeditor5-image/src/imagecaption';
import ImageStyle from '@ckeditor/ckeditor5-image/src/imagestyle';
import ImageToolbar from '@ckeditor/ckeditor5-image/src/imagetoolbar';
import ImageUpload from '@ckeditor/ckeditor5-image/src/imageupload';
import Indent from '@ckeditor/ckeditor5-indent/src/indent';
import Link from '@ckeditor/ckeditor5-link/src/link';
import List from '@ckeditor/ckeditor5-list/src/list';
import MediaEmbed from '@ckeditor/ckeditor5-media-embed/src/mediaembed';
import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
import PasteFromOffice from '@ckeditor/ckeditor5-paste-from-office/src/pastefromoffice';
import Table from '@ckeditor/ckeditor5-table/src/table';
import TableToolbar from '@ckeditor/ckeditor5-table/src/tabletoolbar';

import Underline from '@ckeditor/ckeditor5-basic-styles/src/underline'; //added underline plugin

export default class ClassicEditor extends ClassicEditorBase {}

// Plugins to include in the build.
ClassicEditor.builtinPlugins = [
    Essentials,
    UploadAdapter,
    Autoformat,
    Bold,
    Italic,
    BlockQuote,
    CKFinder,
    EasyImage,
    Heading,
    Image,
    ImageCaption,
    ImageStyle,
    ImageToolbar,
    ImageUpload,
    Indent,
    Link,
    List,
    MediaEmbed,
    Paragraph,
    PasteFromOffice,
    Table,
    TableToolbar,
    Underline  //added underline plugin
];

// Editor configuration.
ClassicEditor.defaultConfig = {
    toolbar: {
        items: [
            'heading',
            '|',
            'bold',
            'italic',
            'link',
            'bulletedList',
            'numberedList',
            '|',
            'indent',
            'outdent',
            '|',
            'imageUpload',
            'blockQuote',
            'insertTable',
            'mediaEmbed',
            'undo',
            'redo',
            'underline' // added underline plugin
        ]
    },
    image: {
        toolbar: [
            'imageStyle:full',
            'imageStyle:side',
            '|',
            'imageTextAlternative'
        ]
    },
    table: {
        contentToolbar: [
            'tableColumn',
            'tableRow',
            'mergeTableCells'
        ]
    },
    // This value must be kept in sync with the language defined in webpack.config.js.
    language: 'en'
};

[ma2ciek]

Did you build the ckeditor5-build-classic with the added plugin after cloning it like it's in the documentation?

I see that you have:

import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic';

So you load the original package instead of loading the file with the result of building the changed ckeditor5-build-classic package. You should have something like this pointing your custom build instead:

import * as ClassicEditor from './path/to/ckeditor';

[Eyegabry99]

I don't have a custom build. I just edited the preset classic build

[ma2ciek]

So you need to continue the https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/installing-plugins.html and generate the build.

[Eyegabry99]

How can i continue? Isn't the guide ending with "Yarn build"?

[ma2ciek]

So after the yarn build command you should have generated build in the build/ckeditor.js file. That file you need to copy to the Angular project and import from the component.

[Eyegabry99]

What if i use npm? I launched npm install. Is this the correct command to build that?

[ma2ciek]

Nope. It's npm run build.

[Eyegabry99]

I did that command into the following directory: node_modules > @ckeditor > ckeditor-build-classics. Than i changed my import to
import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic/build/ckeditor';
Now it's working fine. Thank you @ma2ciek

[ma2ciek]

I did that command into the following directory: node_modules > @ckeditor > ckeditor-build-classics. Is this the correct way?

No, you should download the ckeditor5-build-classic package outside of the node_modules directory (like a new project). Otherwise, you will lose all your changes done inside node_modules after calling npm install. Then after installing and generating the custom build, you should copy the file to the angular project and import it from the component.

[getrealtec]

Ok CKEditor, this is way too complicated. The goal of libraries and frameworks is to simplify our lives. Do you realize that to add a simple : "underline" button you have to work for 30 minutes and reading tons of documentation and go completely out of standard ES6 principles?

What happened to :

import {Underline} from ckeditor;
use Underline where it counts...

Yes you are fully configurable and I've always loved CKEditor in the past, but this system you are suggesting is literally ridiculous. CKEditor needs to simplify how its customers are using its library. Adding a new button should be as simple as :
use NEW_BUTTON
or
config={toolbar: ["underline"]}
where the config merges with the previous one. Maybe create a
extraConfig={...}
that will merge current configs with the one added in extraConfig if you don't wish to automatically merge all configs put in "config".

Up your game please.

[ma2ciek]

Hey @getrealtec!

The problem is that we currently can't use plain imports to CKEditor 5 source files inside the Angular application. That works easily outside of it. The reason for this are conflicting loaders of Angular and CKEditor 5 and from Angular@5 there's no easy way to force Angular to use different loaders for some source files. So as the Underline plugin imports CSS and SVG files there's no easy way to import it inside of Angular application. I know it's a PITA, but after the Angular stopped exposing ng eject we have really no easy way to build CKEditor 5 sources together with Angular ones. Though, some work has been made in this topic - #26 - this is an unsupported version still, but you might wanna try it.

For easier setup you can try the CKEditor 5 online builder, just pick plugins you want to use, download ready to use build and attach it inside your Angular application.

[martinsotirov]

Half a year later it's still extremely difficult to extend the classic build with plugins in an Angular environment. The effort is just not worth it for the few things most people need to extend it with (underline, alignment etc.).

[ma2ciek]

Building editor from the source could make the integration much easier. Unfortunately, currently, I don't have time to look at it deeper so if anyone is willing to help feel welcome to investigate this topic.

[sarrasarra1]

hi!
you can use => npm install --save ckeditor5-build-classic-plus
import ClassicEditor from 'ckeditor5-build-classic-plus';

public editorsReady(editor) {
editor.ui.getEditableElement().parentElement.insertBefore(
editor.ui.view.toolbar.element,
editor.ui.getEditableElement()
);
}
and problem resolved for underline :) 👍