javascriptreactjsckeditor5

How to display the saved content of CKEditor5 in React Js

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

Solution

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