Change Strapi's Default WYSIWYG to a more feature rich Editor

[derrickmehaffy]

Feature request

Please describe your feature request

• I have created my request on the Product Board before I submitted this issue
  • This is linked to https://portal.productboard.com/strapi/1-roadmap/c/37-wysiwyg-html-editor
• I have looked at all the other requests on the Product Board before I submitted this issue

Summary

The current and previous (v3) WYSIWYG editor are more so basic markdown editors and while markdown is awesome (since I'm writing this feature request in markdown 😄 ) I believe there is room for improvement and we could swap the default editor shipped with Strapi for something more feature rich and complete.

There is already community options in both v3 and v4 such as CKEditor 5, React MD, Toast UI, and Editor.js I do think we should ship something more feature complete then forcing everyone to install one of the community options.

If anything we could also make it easier to swap out our editor by standardizing methods to build new editors into the Strapi interface.

Why is it needed?

Our current editor only supports the bare minimums in terms of markdown support (eg no tables, ect) and support for things like inline youtube video previews, ect are a bit more complex to handle properly.

Likewise not all non-technical content editors are familiar or like markdown. Likewise in many frontend frameworks a library is required to convert markdown to html. I believe it could be possible to handle this type of conversion server side and maybe caching those outputs (or pregenerating them).

Suggested solution(s)

I don't believe selecting an html specific WYSIWYG editor is a good idea because ideally as not all uses for strapi will support html but I believe the best option is to pick an editor that instead uses a more json backed structure like Editor.js as we could either build in support in SDKs to convert this format to markdown, html, whatever basically and it fits with native strapi implementations (even doing things like lifecycle modifications to the content, ect would be very easy since we could natively interface with specific parts of the content)

Ideally whatever editor we choose should be opensource and preferably have a strong plugin system itself that we could leverage. I'm not saying Editor.js should be our choice but there is a lot of editors out there and I think it would be cool to explore this as a community and see what everyone thinks.

Related issue(s)/PR(s)

#10706
#9770
#8662
#4586
#3865
#3114
#2950
#1291
#8004
#6051
#2505
#978
https://github.com/Roslovets-Inc/strapi-plugin-ckeditor5
https://github.com/kwinyyyc/strapi-plugin-wysiwsg-react-md-editor
https://github.com/fagbokforlaget/strapi-plugin-wysiwyg-toastui
https://github.com/melishev/strapi-plugin-react-editorjs

[derrickmehaffy]

List of editors I found by googling around that could be good options (will update this as I find more)

• https://quilljs.com/
• https://editorjs.io/
• http://suneditor.com/sample/index.html
• https://appleple.github.io/smartblock/

Awesome list of editors:
https://github.com/JefMari/awesome-wysiwyg

[gu-stav]

Thanks a lot for summarizing the feedback, @derrickmehaffy. I personally agree that we should support more use-cases with the editor. However, I would like to put a lot of emphasis on editors, which don't store the content in HTML/ Markdown, but a structured format such as JSON.

It goes very well with any API approach and allows to tailor the rendering of the content to any usecase. I believe these popular approaches currently exist:

Prosemirror

Very popular. The schema is not 100% customizable (leafes (ex: bold, em ...)) are hard-coded. It can be extended nicely and is used in newsrooms a lot, because it was started by the NyTimes and then adopted by the guardian and others. Because it is already quite old a very nice ecosystem has evolved around it, such as tiptap.

• https://prosemirror.net

Slate.js

Is newer than Prosemirror but has some advantages (e.g. easier schema, cleaner API (opinionated)). Keystone.js has build the document field on top of it, which I believe is very powerful (Demo here). All you see will be stored in JSON and can therefore be queried. What I do like about their implementation: they even ship a utility to render the JSON into React components.

• https://docs.slatejs.org/

Portable Text

I don't know much about it, tbh (maybe someone else does?), but I think it is mainly being used by Sanity.io.

https://github.com/portabletext/portabletext

[derrickmehaffy]

@gu-stav Yeah I agree, not storing html or markdown would ideally be best

[BhuvaneshPatil]

Editor js - https://editorjs.io/

Would be really good. Because -
1 ) No need to have the preview.
2 ) Outputs in JSON. Which can be consumed easily with APIs
3 ) Easy to handle for Non-Technical folks.

[julesrenaud]

I'm very interested by a "richer" text editor, but I think there should remain an option for storing content as markdown in the database as it can make data more portable if ever a project needs to migrate away from Strapi for whatever reason.

[derrickmehaffy]

Was just playing around with this fork for v4 on the editor.js editor and it's really neat (not quite production ready)

https://github.com/jaskipper/strapi-plugin-react-editorjs/tree/beta-v4
Forked from: https://github.com/melishev/strapi-plugin-react-editorjs

[kaansan]

This would be great. I've needed a solution for this and still looking for third party plugins in order to support better utilized editor.
I would be very appreciated if I can see all in one editor in Strapi V4.

[strapi-bot]

This issue has been mentioned on Strapi Community Forum. There might be relevant details there:

https://forum.strapi.io/t/v4-default-rich-text-editor-needs-improvements/13535/5