2

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

Improve this question

1 Answer 1

Reset to default
2

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?

Improve this answer
2
  • Hi Hugo, thanks! I am basically looking for a way to let editors upload and insert images as well as the rich text. The uploaded pictures should be saved to a library on the current SharePoint site, and the img src references updated to reflect the new links. What would you recommend for achieving this? I found a guy that's posted a few samples doing this, but I'm having a hard time fitting it together (no source code available for download): link
    – Frank-Ove Kristiansen
    Commented Dec 6, 2019 at 12:09
  • One more link: Upload CKeditor5 Images To SharePoint Document Library Using SharePoint Framework (SPFx) A list of all his articles: List
    – Frank-Ove Kristiansen
    Commented Dec 6, 2019 at 12:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.