Month: May 2020

CKEditor 5 adding image upload plugin

CKEditor 5 is good because of easy installation and usage.

However when I tried to add image upload plugin, it wasn’t that easy.

I would like to share the tips how to add.

Below instruction was very helpful for figuring out how to: https://www.npmjs.com/package/ckeditor5-simple-upload

  • Install CKEditor 5 classic
npm install --save @ckeditor/ckeditor5-build-classic 
yarn run build
  • Install image upload, simple upload plugin.
npm install --save @ckeditor/ckeditor5-upload 
npm install ckeditor5-simple-upload
  • Open src/ckeditor.js file and add below
import ImageUpload from '@ckeditor/ckeditor5-image/src/imageupload';
import SimpleuploadPlugin from 'ckeditor5-simple-upload/src/simpleupload'
  • After adding the plugin, run build command
yarn run build
  • Create test page.
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <script src="/adm/ckeditor_classic/ckeditor5-build-classic/build/ckeditor.js"></script>
</head>
<body>
  <div id="editor"></div>
<script>
var cb = function() { return (new Date()).getTime() }
ClassicEditor
    .create( document.querySelector( '#editor' ), {
      simpleUpload: {
        uploadUrl: {url:'/adm/ckeditor_classic/upload_image.php', headers:{ 'x-header':'myhead', 'x-header-cb': cb } }
      }          
    } )
    .catch( error => {
        console.error( error );
    } );
    
</script>  
</body>
</html>