CKEditor 4 WYSIWYG editor Angular component

CKEditor 4 was launched in 2012 and reached its End of Life (EOL) on June 30, 2023.

A special edition, CKEditor 4 LTS ("Long Term Support"), is available under commercial terms ("Extended Support Model") for anyone looking to extend the coverage of security updates and critical bug fixes.

With CKEditor 4 LTS, security updates and critical bug fixes are guaranteed until December 2026.

After June 30, 2023 the master version of the LICENSE.md file changed to reflect the license of CKEditor 4 LTS available under the Extended Support Model.

This repository now contains the source code of CKEditor 4 LTS Angular Component that is protected by copyright law.

You may continue using CKEditor Angular Component 4.0.1 and below under the open source license terms. Please note, however, that the open source version no longer comes with any security updates, so your application will be at risk.

In order to download the open source version of CKEditor 4 Angular Component, use tags 4.0.1 and below. CKEditor Angular Component 4.0.1 was the last version available under the open source license terms.

Official CKEditor 4 WYSIWYG editor component for Angular.

We are looking forward to your feedback! You can report any issues, ideas or feature requests on the integration issues page.

In order to create an editor instance in Angular, install the ckeditor4-angular npm package as a dependency of your project:

npm install --save ckeditor4-angular

After installing, import CKEditorModule to your application:

import { CKEditorModule } from 'ckeditor4-angular';

@NgModule( {
    imports: [
        ...
        CKEditorModule,
        ...
    ],
    …
} )

You can now use the <ckeditor> tag in the component template to include the rich text editor:

<ckeditor data="<p>Hello, world!</p>"></ckeditor>

The data attribute used in the example above is responsible for setting the editor’s data.

See the CKEditor 4 Angular Integration article and Angular examples in the CKEditor 4 documentation.

The CKEditor 4 Angular component works with all the supported browsers except for Internet Explorer 8-11.

The integration can be used together with Angular at version 5.0.0 and higher. It is an implication of Angular metadata produced for this package by the Angular builder. Note that the package.json used in the main repository isn't published on NPM (the production one is present in src/ckeditor/package.json), so there are only a few peer dependencies:

• @angular/core >= 5.0.0
• @angular/common >= 5.0.0
• @angular/forms >= 5.0.0

required by this package.

Here is how you can contribute to the development of the component. Any feedback and help will be most appreciated!

All issues and feature requests should be reported in the issues section of the official GitHub repository for the CKEditor 4 Angular integration.

Clone the CKEditor 4 Angular integration repository.

Once you have cloned it, install dependencies by running:

npm install

This repository contains the following code:

• ./src/ckeditor contains the CKEditor component,
• ./src/app is a demo application using the component.

Run ng serve to start the development server. Navigate to https://localhost:4200/. The app will automatically reload if you change any of the source files.

Run ng build to build the samples. The build artifacts will be stored in the samples/ directory.

Run npm test to execute unit tests via Karma.

There are two options available to alternate the testing process:

• url / u - pass custom URL to Karma, for example custom CKEditor 4 build.
• watch / w - tell Karma to watch for changes.

For example:

npm run test -- -u https://localhost:5000/ckeditor.js -w

Run ng e2e to execute the end-to-end tests via Protractor.

To build and publish the package, run npm run publish.

You can also manually build the package with npm run build-package which will be stored in dist/. Then you can publish it with npm publish dist/.

Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.

For full details about the license, please check the LICENSE.md file.

Licensed under the terms of any of the following licenses at your choice:

• GNU General Public License Version 2 or later,
• GNU Lesser General Public License Version 2.1 or later,
• Mozilla Public License Version 1.1 or later (the "MPL").

CKEditor 4 LTS Angular Component (starting from version 5.0) is available under a commercial license only.