Troubleshooting CKEditor5 / Angular integration issues with SourceEditing plugin

When incorporating Angular 18 with CKEditor 5 and Material Design, I encountered a problem when trying to add the SourceEditing plugin to the CKEDITOR config.

I am wondering if anyone else has experienced the following errors:

COMPILATION ERRORS

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

An appropriate loader may be needed to handle this file type as currently no loaders are configured. Refer to https://webpack.js.org/concepts#loaders

(similar issue occurring for every SVG file in CKEditor)

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() {
}

}

Answer №1

To activate the sourceEditing feature, you must create a customized build. You can generate your personalized build by visiting the official site: If you do not have a license, it is recommended to avoid premium plugins. Once you have downloaded the zip file, create a folder with the src level as shown in the directory example below:

├── ckeditor5

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

Once everything is set up, install the necessary node-packages for the editor and specify the path to the build directly in the component .ts file. For instance: import Editor from 'ckeditor5-custom-build/build/ckeditor';

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The module 'angular/common' was not found in the Angular 2 TypeScript

While experimenting with a sample login form in Angular 2, I encountered an issue when trying to import 'Form_Directives' as: import { FORM_DIRECTIVES } from '@angular/common'; An error was displayed stating that the angular/common m ...

Error TS2307: Module '~express/lib/express' could not be located

Currently, I am in the process of converting a fully functional JavaScript file to TypeScript. Since I am using Express in this particular file, I made sure to include the following at the beginning of the file: ///<reference path="./typings/globals/n ...

Library of Functions in Angular 2

As I develop my application, I'm considering creating a functions library that can be utilized by various components. What would be the most effective approach to achieve this? Should I create a service containing all the functions, or rely on classes ...

Using the reduce method in JavaScript or TypeScript to manipulate arrays

Just exploring my culture. I have grasped the concept of the reduce principle var sumAll = function(...nums: number[]):void{ var sum = nums.reduce((a, b) => a + b , 0); document.write("sum: " + sum + "<br/>"); } sumAll(1,2,3,4,5); The r ...

The DatePicker in Angular2 and Typescript is unable to execute the property 'toggle' because it is undefined

I've encountered an issue with the calendar icon for angular2's datepicker. Whenever I try to click on it, I keep getting this error: TypeError: Cannot read property 'toggle' of undefined at Object.eval [as handleEvent] (Admiss ...

Error Message Basics in Protractor End-to-End Testing

Recently delved into the world of Angular and now focusing on automating tests. I've created a simple app with a basic form prompting users to input their email. There's a required validator attached to the email field, ensuring that users must e ...

Guide on aligning svg and button horizontally while maintaining vertical alignment

I found this interesting code snippet: .float-left { float: left !important; } .float-right { float: right !important; } .container { padding: 1rem; } .clearfix { clear: both; } .has-border { border: 2px solid #000; } .d-inline-block { ...

Troubleshooting Typescript with Chrome when packaged by Webpack on Visual Studio 2017 using .NET Core 2.2

Many questions have been asked about debugger issues in Visual Studio 2017 with TypeScript and Webpack. Despite the common answer being that it should work by default, my debugger is still not functioning properly. I am new to TypeScript and Webpack, so I ...

Having trouble sending an email using nodejs and mailgun

Before accusing me of asking a duplicate question, I want to clarify that I have already searched for solutions and none of them worked for me. For example, I tried the solution provided in this link: Example of the domain name for mailgun before nodejs? ...

Heapsnapshot in node.js not releasing memory due to issues with RSS

After dealing with a memory leak issue in my node application for several days, I encountered an anomaly where the rss memory was not being released even after performing a heapdump. The Node.js version being used is: $ node --version v12.16.2 Prior to ...

Enhance the functionality of VTextField in Vuetify

Exploring the idea of extending a vuetify VTextField component to create a reusable password-field, I encountered warnings against prop mutation in Vuejs, deeming it an "anti-pattern". One approach I tried involved using a computed property to override th ...

Which Angular Lifecycle event should I utilize to trigger a specific action when either two buttons are pressed or when one of the buttons undergoes a change?

In this scenario, we have a total of 6 buttons split into two groups of 3: one on the top and the other on the bottom. let valuesum; let value1; let value2; let ButtonGroup1clicked= false; let buttonGroup2Clicked= false; function click1 (value){ va ...

How can I update a value using a specific key in Angular?

So, I have a string value that I need to pass to another function. For instance, if the string is 'eng', I want it to be converted to 'en'. I'm looking for a solution that does not involve using slice or if statements. I attempted ...

What is the method to incorporate a fresh generic parameter without officially announcing it?

My goal is to define a type union where one of the types extends an existing type: // The original type type Foo<V> = { value: V; onChange: (value: V) => void }; // Type union incorporating Foo type ADT = ({ kind: "foo" } & Foo<a ...

Display message "This email has already been registered" in the front-end using PrimeNG and SCSS

Can someone help me with informing a new user that the email they entered is already registered? I'm using Angular on the front-end and PrimeNG components. I have async validation set up to check if the email is already in use. When I check the Netwo ...

Issue with PixiJS: Clicking on a line is disabled after changing its position

Trying to create clickable lines between nodes using Pixi has been a bit of a challenge for me. To ensure the line is clickable, I've extended it in an object that incorporates Container. The process involves finding the angle of the line given two p ...

What is a quick way to assign object properties to another object in TypeScript?

Sample: response.rooms.push({ maxPlayers: doc.maxPlayers, ownderId: doc.ownderId, roomId: doc.ownderId, state: doc.state, type: doc.type, }); All the parameters share the same name here. However, the doc object has additional parameters that I d ...

Ways to trigger an event based on the outcome of a pop-up window

In my current project, I am working on a component that includes three buttons: two default options and an additional modal dialog option for more advanced choices. When one of the default buttons is clicked, the component emits an event based on the selec ...

The improper utilization or replacement of Jest mock in an Angular standalone component's unit test is causing issues

Presented here is a streamlined Ionic/Angular component with unnecessary code removed. import { IonicModule, ModalController } from '@ionic/angular'; @Component({ selector: 'my-component', templateUrl: 'my-component.html' ...

Trouble retrieving accurate value from an Angular 17 FormBuilder field

As I construct a text string in my template using various sources, each field triggers its change event independently. However, I am encountering an issue when attempting to retrieve the value of the constraint field within the change event of the identifi ...