I am creating an spfx webpart to allow users to edit some items in a list. I am trying to use office-ui-fabric-react for all the controls as recommended. The list has a rich text field(Enhanced rich text (Rich text with pictures, tables, and hyperlinks). How do I enable editing of such a field in an spfx webpart?
2 Answers
Microsoft Office UI Fabric doesn't currently have a rich text editor control. There have been requests for a rich text control, but the response right now from developers is that "[they] are not currently working on WYSIWYG editor, but it is a good suggestion... [they] will keep this on [their] radar..."_
That said there are a couple examples out there of integrating rich text editors within a SPFx solution:
- TinyMCE Editor: Found within SharePoint/sp-dev-fx-webparts samples repository in GitHub there is a sample SPFx WebPart integrating TinyMCE Editor.
- CKEditor: There is a TechNet Article about integrating CKeditor5 within a SPFx solution and with that an accompanying code sample
It also looks like a future version of the @pnp/spfx-controls-react may have a rich text control. I noticed pull request #211 where user hugoabernier has shared "...a rich text control that mimics the out-of-the-box SharePoint rich text editor (as much as possible), using Quill.js..."
-
Needs tweaking, but love this approach: damjan.blogspot.com/2020/04/…– Chris DSSep 17, 2020 at 15:04
I ended up using CKEditor. Works great.