715
Q3, 2023 — Better Rich Text Editor
in progress
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).
Aurélien Georget
Hey everyone 👋
It's Aurélien from Strapi, we released an alpha version today (v14) with a new field type called Blocks. Try it out and share your feedback on Discord or here. It's based on Slate and provides the same capabilities as any rich-text editor. In the beta, we plan to support links, markdown, keyboard shortcuts (Notion-like), and an expanded view.
✌️
Aurélien Georget
Hey everyone 👋
It's Aurélien from Strapi, we released an alpha version today (v14) with a new field type called Blocks. Try it out and share your feedback on Discord or here. It's based on Slate and provides the same capabilities as any rich-text editor. In the beta, we plan to support links, markdown, keyboard shortcuts (Notion-like), and an expanded view.
✌️
E
Euan Robertson
Aurélien Georget: So glad to see this! Slate seems really powerful and I'm looking forward to moving to it.
Is part of the plan to allow custom Slate plugins to be added to the official editor or is that something that would need done in a Strapi plugin still?
Greg Tyree
Q3 will end pretty soon. Are there any updates on the progress? It would be helpful for example to at least know which editor you have chosen so teams can start preparing. Thanks.
Martin Lukasik
Aurélien Georget, have you considered using Ghost's Koenig editor?
Demo page: https://koenig.ghost.org
GitHub repo: https://github.com/TryGhost/Koenig
Aurélien Georget
Martin Lukasik: I don't think so. However, we made an heavily benchmark. We are currently hesitating between Lexical and Slate. Any recommandation/suggestion?
Aurélien Georget
in progress
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.Andriy Halyasovskyy
Marco Wuethrich Pr: unreal, until this is fixed https://github.com/ckeditor/strapi-plugin-ckeditor/issues/49. Our customers are doing lots of raw-HTML stuff in current Strapi v4 default RTE.
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.
Michael Kinkaid
Andréas Hanss: Completely agree. This is such as fundamental feature in content authoring. Expecting editors to work with plain text URLs - in the scenario where the target content is managed on the platform - is daft.
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.
Andriy Halyasovskyy
da_kicks_87: This should be fixed first: https://github.com/ckeditor/strapi-plugin-ckeditor/issues/49
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).
Load More
→