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 !!!!!