Use CKEditor in SharePoint spfx solution with React

Question

We are trying to set up and use CKEditor5 with React in a SharePoint spfx solution (of course also React), but we are struggling with making it work as we would like.

The Classic build of CKEditor5 works fine, but we want to be able to drag images and upload images into the editor. When we do this, nothing happens. Does anyone have tips, examples, or a working sample you could send us?

We also tested CKEditor4, but the toolbar was completely missing when we tested the webpart in the SharePoint workbench. We even tried explicitly setting the type to classic, but no difference.

We contacted CKEditor Support first, but they wouldn't help us since this was SharePoint-related...

Hope you can help us out.

Thank you very much for your time and effort in advance.

Kind Regards, Frank

Answer 1

Frank,

The CKEditor inserts some CSS styles that forces the toolbar to display in a certain way that doesn't work well with SharePoint.

To get it to work, you can insert Global CSS styles in your own CSS that will override the CKE toolbar styles.

Someone had posted a sample on the SPFx Web Parts Samples repo a while ago that succesfully integrated textbox.io (which is derived from CKE) in SharePoint. It had to be pulled out of the repo due to licensing issues.

If you simply want rich-text editing functionality, may I suggest you use the Richtext control from @pnp/spfx-controls-react.

Full disclaimer: I was the original author of the control, so I may be biased. If there is a reason why the PnP control doesn't meed your needs, let me know and we can think about adding the functionality you need?

I hope this helps?