The best WYSIWYG editor library for React App

There are so many WYSIWYG editor libraries for React app, but not as all work well, some libraries cannot work or have some problems on the mobile devices, beside that, they are difficult to implement.
And now, we suggest you a WYSIWYG editor libraries that it's very easy for implement and use in React App is CKEditor 5 library

Install:

 npm install @ckeditor/ckeditor5-react @ckeditor/ckeditor5-build-classic
 // or 
 yarn add @ckeditor/ckeditor5-react @ckeditor/ckeditor5-build-classic
Copy this code


Add to your React app:

import React from "react";
import ReactDOM from "react-dom";
import CKEditor from "@ckeditor/ckeditor5-react";
import ClassicEditor from "@ckeditor/ckeditor5-build-classic";

import "./styles.css";

function App() {
  return (
    <div className="App">
      <h2>Hello from CKEditor for React!</h2>
      <CKEditor
        editor={ClassicEditor}
        data="<p>Enter something to try!</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 });
        }}
        onBlur={(event, editor) => {
          console.log("Blur.", editor);
        }}
        onFocus={(event, editor) => {
          console.log("Focus.", editor);
        }}
      />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Copy this code


Component properties:

The component supports the following properties:
editor (required) – The Editor constructor to use.
data – The initial data for the created editor. See the Basic API guide.
config – The editor configuration. See the Configuration guide.
onInit – A function called when the editor was initialized. It receives the initialized editor as a parameter.
disabled – A Boolean value. The editor is being switched to read-only mode if the property is set to true.
onChange – A function called when the editor data has changed. See the editor.model.document#change:data event.
onBlur – A function called when the editor was blurred. See the editor.editing.view.document#blur event.
onFocus – A function called when the editor was focused. See the editor.editing.view.document#focus event.

View more documents

© 2019 4codev

Created with love by Sil.