ckeditor / ckeditor5-react-example Goto Github PK

import React, { Component } from 'react'
import CKEditor from '@ckeditor/ckeditor5-react'
import editor from '@ckeditor/ckeditor5-build-decoupled-document'

import Nav from './nav'

class App extends Component {
    render() {
        const hs = localStorage.getItem('html-string')
        return (
            <div className="App" style={{ width: '210mm', height: '297mm' }}>
                <Nav />
                <CKEditor
                    editor={ editor }
                    data={hs || <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()
                        localStorage.setItem('html-string', data)
                        console.log( { event, editor, data } )
                    } }
                    onBlur={ editor => {
                        console.log( 'Blur.', editor )
                    } }
                    onFocus={ editor => {
                        console.log( 'Focus.', editor )
                    } }
                />
            </div>
        )
    }
}

export default App