CKEditor 5 classic editor with AutoImage Support

This repository presents a CKEditor 5 editor build generated by the Online builder tool. Along with the ckeditor5 classic build, this build supports AutoImage plugin as well. More information here.

Demo

Check out the demo here.

Installation

For installing this package, hop onto your terminal and run:

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

Make sure that you have the node and npm installed first. If not, then follow the instructions on the Node.js documentation page.

Usage

import React, { useState } from 'react';
import { CKEditor } from '@ckeditor/ckeditor5-react';
import ClassicEditor from 'ckeditor5-build-classic-autoimage';

const Editor = () => {
  const [editorState, setEditorState] = useState('<p>Write Something...</p>');

  const handleChange = (event, editor) => {
    const data = editor.getData();
    setEditorState(data);
    console.log({ event, editor });
  }

  return (
    <CKEditor
      editor={ClassicEditor}
      data={editorState}
      onChange={handleChange} 
      config={config}
    />
  );
}

Note that you'll need the configuration file for the editor. See full documentation for configuration here.

Your config file would look something like this:

const config = {
  toolbar: {
    items: [
      'heading',
      '|',
      'bold',
      'italic',
      'underline',
      'link',
      'strikethrough',
      'code',
      'codeBlock',
      'bulletedList',
      'numberedList',
      '|',
      'outdent',
      'indent',
      '|',
      'blockQuote',
      'insertTable',
      'mediaEmbed',
      'undo',
      'redo'
    ]
  },
  language: 'en',
  image: {
    toolbar: [
      'imageTextAlternative',
      'imageStyle:inline',
      'imageStyle:block',
      'imageStyle:side'
    ]
  },
  table: {
    contentToolbar: [
      'tableColumn',
      'tableRow',
      'mergeTableCells'
    ]
  },
  mediaEmbed: {
    previewsInData: true
  },
}

Adding or removing plugins

This package contains a ckeditor build. So, if you are trying to add any additional plugin, you might encounter an error as such:

CKEditorError: ckeditor-duplicated-modules: Some CKEditor5 modules are duplicated...

This likely means that your project loads some CKEditor 5 packages twice. How does it happen?

The build package contains a file which is already compiled with webpack. This means that it contains all the necessary code from e.g. @ckeditor/ckeditor5-engine and @ckeditor/ckeditor5-utils. For more information on what else could cause this error, go here.

A simple workaround to resolve this error is to create your own build using CKEditor5 Online Builder. Unfortunately, this is the only viable solution available at the moment.

Acknowledgements

Thanks to the CKEditor team for this wonderful WYSIWYG Editor.