React CK Editor

 

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

npm i react-html-parser

import React, { useState } from "react";

import { CKEditor } from '@ckeditor/ckeditor5-react';

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

import ReactHtmlParser, { processNodes, convertNodeToElement, htmlparser2 } from 'react-html-parser';

export default function App() {

  const [data, setData] = useState('');

  const handleChange = (e, editor) => {

    setData(ReactHtmlParser(editor.getData()))

  }

  return (

    <div >

      <CKEditor

        editor={ClassicEditor}

        onChange={(e, editor) => handleChange(e, editor)}

      />

      <div>{data}</div>

    </div>

  );

}