How to display the saved content of CKEditor5 in React Js

Question

I am using CKEditor5 React Component Framework.I have successfully integrated the CKEditor in my project.And Being Able to use it. But the problem is that I have to save the Content of the editor to the database and then display it to website.. All I get in the content

<blockquote><p>Hello from CKEditor 5!</p></blockquote>

And While Displaying it does not applies the css of CkEditor to show ..

Setup for CKEDITOR IS

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


export class ClassicEditor extends Component {
    constructor(){
        super();
        this.state = {
            content : ""
        }
    }
    onCashange  = data => { 
        console.log( "Called" );
        this.setState({
            content : data.getData()
        })
     }
    render() {
        Classiceditor.builtinPlugins.map( plugin => console.log(plugin.pluginName) );

        console.log("State", this.state.content);
        return (
            <>
            <div className='App'>
                <h2> Using CKEditor</h2>
                <CKEditor
                    editor = { Classiceditor }
                    data = "<p>Hello from CKEditor 5!</p>"
                    onInit = { editor => { 
                        //console.log( 'Editor is ready to use!', editor )
                     } }
                     onChange = { ( event, editor ) => { 
                         this.onCashange( editor );
                         
                        // const data = editor.getData();
                        // this.onChange( data );
                        // //console.log( { event, editor, data } );
                      }}
                    onBlur = { editor => 
                    console.log("Blur", editor) }
                    onFocus = { editor => { 
                        //console.log( "Focus", editor )
                     } }  
                />
            </div>
            
            <div className='editor'>
                     { this.state.content }
            </div>
            </>
        )
    }
}

export default ClassicEditor

Answer 1

There are 2 options:

• Download or using script to get Full CSS and include it in your project. Link here

Note: You have to add a parent container with a class name ck-content

• Create a custom CKEditor 5 build from the source code with all the CSS (both UI and the content) extracted to a separate file Advance Guide

You can see more here from the documentation: Content Styles

Answer 2

React does not allow you to render html code directly. Instead you have to use dangerouslySetInnerHTML attribute to do so. Do the following to solve your problem,

<div dangerouslySetInnerHTML={this.createMarkup()} className='editor'></div>

and have a method on the class as

    createMarkup = () => {
      return { __html: this.state.content };
    }

This will make sure that you are not rendering the raw HTML to the page.

You can read more about this here

Answer 3

you can just install npm package like npm i react-render-html enter link description here and use it like :

 <div className='...'>
    {renderHTML(someHTML)}
  </div>