CKEditor Component

import React from 'react';
import { CKEditor } from '@ckeditor/ckeditor5-react';
import Editor from 'ckeditor5-custom-build/ckeditor';

import './dckeditor.scss'

class DCKEditor extends React.Component{
  constructor(props){
    super(props);
    let editorConfig = {
      toolbar: ['fontfamily', 'fontsize', 'fontcolor', 'bold', 'italic', 'bulletedList', 'indent', 'outdent', 
      'numberedList', 'link', 'blockQuote', 'code', 'codeblock', 'imageinsert', 'mediaembed', 'undo', 'redo' ]
    };
    this.state = {
      config: editorConfig
    }
  }

  render(){
    return(
      <div className="CKEditor">
        <div className='ckeditor'>
          <CKEditor
            editor={ Editor }
            config={ this.state.config }
            data="<p>Hello from CKEditor 5!</p>"
            onReady={ editor => {
              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>
      </div>
      
    );
  }
}

export default DCKEditor;

.CKEditor{
  width: 80%;
  float: right;
  padding-left: 20px;
  border-left: 1px solid lightgrey;
  text-align: left;
  .ck-editor__editable {
    min-height: 280px;
  }
}

GitHub: "https://github.com/Sokhavuth/emultimedia
Heroku: https://khmerweb-emultimedia.herokuapp.com/