CKEditor5 / Angular errors when including SourceEditing plugin

Question

Using Angular 18 + CKEditor 5 + Material Design:
When I add the SourceEditing plugin to the CKEDITOR config, it crashes.

Has anyone seen the errors below?

ERRORS ON COMPILE

./node_modules/@ckeditor/ckeditor5-core/theme/icons/align-bottom.svg:1:0 - Error: Module parse failed: Unexpected token (1:0)

You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

(happening for every SVG file that CKEditor has)

HTML

<ckeditor [editor]="Editor" [config]="{ plugins: [sourceEditing], toolbar: [ 'bold', 'italic', 'sourceEditing' ] }" />

TYPESCRIPT

import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import { SourceEditing } from '@ckeditor/ckeditor5-source-editing';

export class SomethingSomethingComponent implements OnInit {

public Editor = ClassicEditor;
public sourceEditing = SourceEditing;

constructor() {
}

}

clear npm cache and install again, it could be install issues — Naren Murali
– Naren Murali, Commented Oct 27, 2023 at 4:09

Waleed Mughal · Accepted Answer · 2023-10-31 13:33:31Z

1

You need to create a custom build in order to enable sourceEditing feature. You can create custom build from this official site: https://ckeditor.com/ckeditor-5/online-builder/ avoid premium plugins if you don't have license. after the zip file downloaded make a folder with src level below is the directory example

├── ckeditor5

│ ├── build │ ├── sample │ ├── src │ ├── ... │ ├── package.json │ └── webpack.config.js ├── node_modules ├── src ├── ... └── package.json

After every thing in place you need to install node-packages for editor and provide the path of directly in the component .ts file to that build for example: import Editor from 'ckeditor5-custom-build/build/ckeditor';

answered Oct 31, 2023 at 13:33

Waleed Mughal

111 bronze badge

Sign up to request clarification or add additional context in comments.

2 Comments

Dennis Over a year ago

I am not sure if I have to go that route. According to this CKEDITOR documentation page ( ckeditor.com/docs/ckeditor5/latest/features/source-editing.html ) ... all I need to do is a simple : npm install --save @ckeditor/ckeditor5-source-editing

Waleed Mughal Over a year ago

also that document refer to make the custom build if you are using any FE framework and want custom plugins ckeditor.com/docs/ckeditor5/latest/installation/integrations/…

Collectives™ on Stack Overflow

CKEditor5 / Angular errors when including SourceEditing plugin

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related