689
New Rich Text Editor
candidate
Aurélien Georget
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 smile ) 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).
M
Marco Wuethrich Pr
I use CKEditor 5 =>
@_sh/strapi-plugin-ckeditor
and happy with it. It might be worth considering using CKEditor as the default.O
Oliver
As a heads up to the team, I've managed to build a very nice custom component based off this repo @_sh/strapi-plugin-ckeditor which does nearly everything. If you integrate that by default and add the ability to create custom buttons on the toolbar you'll be in with a winner <3
Andréas Hanss
Oliver: I'll take a look closer, so this way it would be possible to manage content links ?
O
Oliver
Andréas Hanss: Havnt looked into that as the front end is built with nextjs and I’m not sure how easy it’ll be to link to different content? Not sure if that’s what you meant!
Andréas Hanss
Oliver: What is meant is that currently when you manage links (hyperlinks) using the wysiwyg editor, it ask for a plain link. But the issue with that is that if the URL of the content changes, the link will be broken. Some Rich editor allows to link to other content types to prevent this kind of issue and will build the URL on demand.
O
Oliver
Andréas Hanss: yes gotcha! I’m looking more for a decent set of features in the editor alone to manage typography etc. Thats what works very well with this ckeditor plug-in :)
Andréas Hanss
The most important currently missing feature is the capability to make links to other content. Because without this your application can result in dead-links, which has the most awful impact on your website.
d
da_kicks_87
I like CKEditor5's simplicity. It is what I am lookin for in a rich text editor.
A few months ago the CKEditor team released an official custom field version of the plugin. (https://github.com/ckeditor/strapi-plugin-ckeditor)
It works well, but can use improvement in the light/dark mode theme and custom options for the tool bar.
Is it possible for the Strapi team and CKEditor team to collaborate to accomplish improvements to the new plugin?
I know Drupal CMS uses CKEditor5 as it's default rich text editor. Would be cool if Strapi did the same.
Pankaj Ph
Even if we can preserve the same editor but instead of markdown, provide a WYSIWYG experience, that would solve a singnificant part of the problem. For backward compatibility markdown can continue to function, just a variation of Rich Text field.
From a devX perspective, there should be a library which converts the API response of the rich text content to React components.
https://www.npmjs.com/package/@contentful/rich-text-react-renderer something like this.
vishnu p s
I would like strapi to implement its editor version of slate.js and editor.js to experience editing that feels "Medium" article type with customization easy to work much like how the editor is in ghost ( https://ghost.org/ )
A
Alagunasalahaddin
vishnu p s: there is already a plugin for EditorJS, but its developer is not willing to continue with it if he can't find a mentor(https://github.com/melishev/strapi-plugin-react-editorjs/issues/62#issuecomment-1276824800).
muro
I think that tiptap is the better editor
M
Mathieu Preau
muro: for now, but no proper embeds are problematic
Andreas Faust
A modern, feature-rich WYSIWYG-editor would be important. The default was never sufficient for me, so for every Strapi-project I needed to implement a custom editor, which always took time and effort — and was never really satisfying. Additionally easy per-field customization (e.g. which options should be visible in the toolbar) would be mandatory. ProcessWire does a great job in this case.
M
M K Abdelkader
definitely and indeed to update the current WYSIWYG
Simon
I think that indeed this feature request is one of the most important, I see potential problems in not prioritizing it as soon as possible.
Today if developers install third party plugins like the one that exists for Tiptap or EditorJS they run the risk of having difficulties to switch to the native editor that Strapi will officially offer.
I saw Derrick Mehaffy's answer on Github, it seems that storing documents in JSON in the database is the choice that will be retained in the long run. At least these are the choices that me and my team have chosen in our various projects, so it's a point of view I defend.
However, the Tiptap plugin currently stores the HTML output (and not the JSON - prosemirror model). On the contrary, EditorJS stores the output as JSON.
If tomorrow Strapi decides to switch from the current markdown to a JSON model, the HTML coming from the Tiptap plugin will have to be converted to this new format, if the format is not the EditorJS one then the same struggle for the data coming from the EditorJS plugin. And conversions are always complicated.
Moreover, if Strapi stores JSON, I think it should be possible to have at least one output in HTML or to have libraries allowing to do it or to rely on the existing one. For example Prosemirror / Tiptap offers what is needed (In JS only from memory) to convert the content.
Purely from a technological point of view, I think Prosemirror and Tiptap are really good with a great community and ready for collaborative editing with yjs. I know less EditorJS but their editor seems to have a very good UX, like Notion, modern and attractive.
That's my point of view, I can't wait to continue the reflexion with you ;) there are possibly other technologies that can be just as relevant.
P
Pritam Sangani
I am currently using CKEditor, which stores the data as HTML, so it would be a real pain to have to write migration scripts to convert the data to JSON as well as update the front-end code to support JSON over HTML.
Having said that, I understand the motivation behind storing the editor data in a structured way using JSON, but it would be great if we had the opportunity to store it in HTML if we so choose, or provide migration scripts to convert HTML/Markdown to the JSON format that the editor supports.
From some of the suggestions provided so far, I really like the look of https://tiptap.dev/. It supports saving in both HTML and JSON and it seems to be really customisable. Additionally, it seems like it can be extended to add realtime collaboration, which would be awesome to have.
A
Alagunasalahaddin
Simon: EditorJS is actively in development, not that some of the most used plugins, and also its react implementation.
They also don't plan to support embedding videos, neither the people who were developing a plugin addressing this feature.
Load More
→