Integrate CKEditor 5 in SharePoint Framework (SPFx)

Step by step procedure to integrate CKEditor 5 Classic Editor in SharePoint Framework

Today, we will learn to integrate CKeditor 5 in your SharePoint FrameWork (SPFx). Below are the steps followed.

 

What is Classic Editor in CKEditor5?

 

Classic editor is what most users traditionally learnt to 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';

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'
};

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"), {
        }).then(editor => {
            console.log("CKEditor5 initiated");
        }).catch(error => {
          console.log("Error in Classic Editor Create " + error);
        });
    } catch (error) {
      console.log("Error in  InitializeCKeditor " + error);
    }
  }

Please feel free to share your comments.

 

Hope this helps !!!!!