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+ angular

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.

CKEditor 5 offers great editing capabilities for html and markdown, but it can also be used for things like being an angular WYSiWYG editor that can be integrated into your web app. It can become a react rich text editor and also be useful for a javascript rich text editor framework. On top of it, it is constantly updated due to its nature of being an open source WYSIWYG editor.

# 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

React is basically a JavaScript library for building user interfaces. and CKEditor 5 is among the best, if not the best, React WYSIWYG editors out there. The APIs of React and CKEditor work well together.

The easiest way to use CKEditor 5 in your React application, and turn it into an angular editor if you choose to, 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+

Angular is a TypeScript-based framework relying on typed code in order to create scalable web apps. An Angular editor can be integrated into such a web app in fact or used to type code. CKEditor 5 is in fact perfect for this task or among the best angular editors one can use in our opinion or also perfect for overall rich text editing. 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.

In no time you will have an angular rich text editor or an angular rich text editor component within your application that you integrate CKEditor 5 into. You can further customize CKEditor 5 to your liking as buildin rich text editors has never been easier thanks to the team at CKSource that is behind CKEditor 5.

# 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.

Update: The CKEditor 5 WYSIWYG editor integration with Vue.js is now available!

# 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.

See related articles:

• 5 Reasons Why Open Source Software Is Perfect For Enterprise Solutions
• Is coding for everyone? Can you become a programmer? Check this out!
• Editor Recommendations Project
• 10 Tips on How to Pick a WYSIWYG Editor
• How to become a better programmer
• Top WYSIWYG Editor Myths