ckeditor5-custom-build-reach v0.2.0

ckeditor5-custom-build-reach

See it live here.

This is a custom build of CKEditor 5 based off of the Classic Editor. It is meant to use paired with the official React component.

The original documentation stands true for the most part. For the part that it differs, it will be highlighted in this README.

• Added custom plugin / toolbar button for handling images from URL. It uses a prompt() as an input for the image URL.

--

Quick start

Add it to your project:

npm install @ckeditor/ckeditor5-react ckeditor5-custom-build-reach

And use it as a component like so:

import CKEditor from '@ckeditor/ckeditor5-react';
import CKEditorReach from 'ckeditor5-custom-build-reach';

<CKEditor
  editor={ CKEditorReach }
  data="<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();
    console.log( { event, editor, data } );
  } }
  onBlur={ ( event, editor ) => {
    console.log( 'Blur.', editor );
  } }
  onFocus={ ( event, editor ) => {
    console.log( 'Focus.', editor );
  } }
/>

Development

Clone the repo and run

npm install

Add a new file with your plugin to the folder src/customPlugins and update src/ckeditor.js to include your plugin:

// src/ckeditor.js
// ...

// Custom plugins
import InsertImageFromURL from './customPlugins/insertImageFromURL';
import MyNewFancyPlugin from './customPlugins/myNewFancyPlugin';

ClassicEditor.builtinPlugins = [
  // ...

  // From here, these are all custom plugins
  InsertImageFromURL,
  MyNewFancyPlugin
];

ClassicEditor.defaultConfig = {
  toolbar: {
    items: [
      // ...
      
      'insertImageFromURL',

      // This name has to be the same as the first parameter
      // of the call to editor.ui.componentFactory.add('<ADD_NAME_HERE>')
      // in ./customPlugins/myNewFancyPlugin.js
      'myNewFancyPlugin',
    ]
  }
}

License (imported from the original repo)

Licensed under the terms of GNU General Public License Version 2 or later. For full details about the license, please check the LICENSE.md file or https://ckeditor.com/legal/ckeditor-oss-license.