SharePoint

Integrate CKEditor 5 in SharePoint Framework (SPFx)

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.
  1. PS C:\XXXX\SPFxSolutions\SpFxRichTextEditor>npm install --save ckeditor5-classic   
Import "Classic Editor" to your tsx file.
  1. import ClassicEditor from 'ckeditor5-classic';   
Initiate default toolbar configuration settings for Classic Editor. 
  1. ClassicEditor.defaultConfig = {    
  2.   toolbar: {    
  3.     items: [    
  4.       'heading',    
  5.       '|',    
  6.       'bold',    
  7.       'italic',    
  8.       'fontSize',    
  9.       'fontFamily',    
  10.       'fontColor',    
  11.       'fontBackgroundColor',    
  12.       'link',    
  13.       'bulletedList',    
  14.       'numberedList',    
  15.       'imageUpload',    
  16.       'insertTable',    
  17.       'blockQuote',    
  18.       'undo',    
  19.       'redo'    
  20.     ]    
  21.   },    
  22.   image: {    
  23.     toolbar: [    
  24.       'imageStyle:full',    
  25.       'imageStyle:side',    
  26.       '|',    
  27.       'imageTextAlternative'    
  28.     ]    
  29.   },    
  30.   fontFamily: {    
  31.     options: [    
  32.       'Arial',    
  33.       'Helvetica, sans-serif',    
  34.       'Courier New, Courier, monospace',    
  35.       'Georgia, serif',    
  36.       'Lucida Sans Unicode, Lucida Grande, sans-serif',    
  37.       'Tahoma, Geneva, sans-serif',    
  38.       'Times New Roman, Times, serif',    
  39.       'Trebuchet MS, Helvetica, sans-serif',    
  40.       'Verdana, Geneva, sans-serif'    
  41.     ]    
  42.   },    
  43.   language: 'en'    
  44. };    
Insert text area to render the CKeditor5 on load. 
  1. public render(){    
  2.     return (    
  3.       <div>    
  4.         <textarea id="editor1"></textarea>     
  5.       </div>    
  6.     );    
  7.   }    
Replace text area with CKEditor5 on componentDidMount.
  1. componentDidMount(){    
  2.   this.InitializeCKeditor();    
  3. }  
  1. /* Load CKeditor RTE*/    
  2.   public InitializeCKeditor(): void {    
  3.     try {    
  4.       /*Replace textarea with classic editor*/    
  5.       ClassicEditor    
  6.         .create(document.querySelector("#editor1"), {    
  7.         }).then(editor => {    
  8.             console.log("CKEditor5 initiated");  
  9.         }).catch(error => {    
  10.           console.log("Error in Classic Editor Create " + error);    
  11.         });    
  12.     } catch (error) {    
  13.       console.log("Error in  InitializeCKeditor " + error);    
  14.     }    
  15.   }    
Please feel free to share your comments.
 
Hope this helps !!!!!
 
Membership not found