« See all

The best WYSIWYG editor for Angular and React is here

We are happy to announce the first two integrations of CKEditor 5 with popular JavaScript frameworks:

  • CKEditor 5 WYSIWYG editor component for React
  • CKEditor 5 WYSIWYG editor component for Angular 2+

We want to make installing and integrating CKEditor 5 as simple and intuitive as possible. Therefore, CKEditor 5 builds are available on npm, CDN and as zip packages. To create them we use standard and popular tools such as webpack and PostCSS that allow developers to create tight and flexible integrations with their systems.

# Is CKEditor 5 compatible with framework XYZ?

Yes. CKEditor 5 is compatible with every JavaScript framework that we have heard of so far. CKEditor 5 is a JavaScript rich-text editing component and it does not require any uncommon techniques or technologies to be used. Therefore, unless the framework that you use has very not typical limitations, CKEditor 5 is compatible with it.

With native components for React and Angular 2+ we want to make the process of integrating our rich-text editor even faster. Let’s see how you can use CKEditor 5 with these frameworks.

# WYSIWYG editor for React

The easiest way to use CKEditor 5 in your React application is to install @ckeditor/ckeditor5-react and one of the CKEditor 5 Builds:

npm install --save @ckeditor/ckeditor5-react @ckeditor/ckeditor5-build-classic

Then, you can use the build and the <CKEditor> component like this:

import React, { Component } from 'react';
import CKEditor from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

class App extends Component {
    render() {
        return (
            <div className="App">
                <h2>Using CKEditor 5 build in React</h2>
                <CKEditor
                    editor={ ClassicEditor }
                    data="<p>Hello from CKEditor 5!</p>"
                    onInit={ editor => {
                        // You can store the "editor" and use when it is needed.
                        console.log( 'Editor is ready to use!', editor );
                    } }
                    onChange={ ( event, editor ) => {
                        const data = editor.getData();
                        console.log( { event, editor, data } );
                    } }
                />
            </div>
        );
    }
}

export default App;

Learn more about how to integrate CKEditor 5 with your React application in the CKEditor 5 rich-text editor component for React guide.

# WYSIWYG editor for Angular 2+

In order to use CKEditor 5 in your Angular application, you need to install @ckeditor/ckeditor5-angular and one of the CKEditor 5 Builds.

Add CKEditorModule to your application module imports:

import { CKEditorModule } from '@ckeditor/ckeditor5-angular';

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

Import the editor build in your Angular component and assign it to a public property so it becomes accessible in the template:

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

@Component( {
	...
} )
export class MyComponent {
	public Editor = ClassicEditor;
	...
}

Finally, use the <ckeditor> tag in the template to run the WYSIWYG HTML editor:

<ckeditor [editor]="Editor" data="<p>Hello, world!</p>"></ckeditor>

Rebuild your application and CKEditor 5 should greet you with “Hello, world!”.

Learn more about how to integrate CKEditor 5 into your Angular application in the CKEditor 5 rich-text editor component for Angular 2+ guide.

# WYSIWYG editor for Vue.js

We do not plan to stop on these first two integrations. We are starting to work on bringing our rich-text editor to Vue.js right now. We would also like to gather more ideas for integrations with other frameworks in #1002.

# Feedback

We want to thank the community for all the comments and issues reported for the beta versions of the Angular and React components. Please keep them coming and help us improve the integrations!

At the same time, we are looking forward to hearing what other frameworks we should support with a native CKEditor 5 rich-text editor integration.

# Curious about more?

If you would like to learn more about CKEditor 5 technology we recently published an article about lessons learned from creating a rich-text editor with real-time collaboration.

You can also read about the latest CKEditor 5 release which introduced media embedding and important enhancements to the table feature: support for block content and real-time collaborative editing.

CKEditor 4.11 with emoji dropdown and auto link on typing released
CKEditor 5 v11.1.0 with media embed and collaborative tables