CKEditor 5 Image Upload Plugin in SharePoint Framework (SPFx)

Steps to build a custom plugin to upload images in CKEditor5 (Classic Editor) Rich Text Editor.

In this blog, we will learn to build a custom image upload plugin to upload images to CKEditor5 (Classic Editor) using SharePoint Framework (SPFx).

What is Classic Editor in CKEditor5?

 

Classic editor is what most users traditionally associate with a rich text editor — a toolbar with an editing area placed in a specific position on the page, usually as a part of a form that you use to submit some content to the server.

 

Note: Ckeditor5 Classic Editor is not yet supported in IE11 browser check here.

 

Below code tested in Chrome, Mozilla and Edge.

 

Code Usage:

 

Install "ckeditor5-classic" from your node package manager console as shown below.

PS C:\XXXX\SPFxSolutions\SpFxRichTextEditor>npm install --save ckeditor5-classic

Import "Classic Editor" to your tsx file. 

import ClassicEditor from 'ckeditor5-classic';

Create "MyUploadAdapter.ts" file as shown below.

/* this is my custom Image file adapter */
export default class MyUploadAdapter {
loader:any;
reader:any;
constructor(loader) {
// The file loader instance to use during the upload.
this.loader = loader;
}
//Starts the upload process.
upload() {
return this.loader.file
.then(file => new Promise((resolve, reject) => {
this._initListeners(resolve, reject, file);
}));
}
_initListeners(resolve, reject, file) {
console.log(file.name);
const reader = this.reader = new FileReader();
reader.addEventListener('load', () => {
resolve({ default: reader.result });
});
reader.addEventListener('error', err => {
reject(err);
});
reader.addEventListener('abort', () => {
reject();
});
this.loader.file.then(file => {
reader.readAsDataURL(file);
reader.result
});
}
abort() {
this.reader.abort();
}
}

Import "MyUploadAdapter" to your tsx file.

import MyUploadAdapter from  './MyUploadAdapter';

Import "Jquery" plugin to your tsx file. 

import * as $ from 'jquery';

Initiate default toolbar configuration settings for Classic Editor.

ClassicEditor.defaultConfig = {
  toolbar: {
    items: [
      'heading',
      '|',
      'bold',
      'italic',
      'fontSize',
      'fontFamily',
      'fontColor',
      'fontBackgroundColor',
      'link',
      'bulletedList',
      'numberedList',
      'imageUpload',
      'insertTable',
      'blockQuote',
      'undo',
      'redo'
    ]
  },
  image: {
    toolbar: [
      'imageStyle:full',
      'imageStyle:side',
      '|',
      'imageTextAlternative'
    ]
  },
  fontFamily: {
    options: [
      'Arial',
      'Helvetica, sans-serif',
      'Courier New, Courier, monospace',
      'Georgia, serif',
      'Lucida Sans Unicode, Lucida Grande, sans-serif',
      'Tahoma, Geneva, sans-serif',
      'Times New Roman, Times, serif',
      'Trebuchet MS, Helvetica, sans-serif',
      'Verdana, Geneva, sans-serif'
    ]
  },
  language: 'en'
};

Declare the state variable to store ckeditor event

export interface ICKeditorState {
  CKEditorEvent:any;
}

Initiatlize the state variable in your constructor

constructor(props:  ISpFxRichTextEditorProps) {
    super(props);
      this.state = {
        CKEditorEvent:''
    };
  }
}

Insert text area to render the CKeditor5 on load.

public render(){
    return (
      <div>
        <textarea id="editor1"></textarea>
      </div>
    );
  }

Replace text area with CKEditor5 on componentDidMount.

componentDidMount(){
  this.InitializeCKeditor();
}

/* Load CKeditor RTE*/
  public InitializeCKeditor(): void {
    try {
      /*Replace textarea with classic editor*/
      ClassicEditor
        .create(document.querySelector("#editor1"), {
        extraPlugins: [this.MyUploadAdapterPlugin]
        }).then(editor => {
          console.log("CKEditor5 initiated");
          /*store the ckeditor event in state variable */
          this.setState({CKEditorEvent:editor});
        }).catch(error => {
          console.log("Error in Classic Editor Create " + error);
        });
    } catch (error) {
      console.log("Error in  InitializeCKeditor " + error);
    }
  }

Define Custom image upload adapter plugin

public MyUploadAdapterPlugin(editor) {
  editor.plugins.get('FileRepository').createUploadAdapter = function (loader) {
    /* Initialize MyUploadAdapter class to initiate custom upload adapter */
    return new MyUploadAdapter(loader);
  };
}

Please feel free to share your comments.

 

Hope this helps !!!!!