V4 default Rich Text Editor needs improvements

da_kicks_87 · December 16, 2021, 9:02pm

Hello, I’m new to the Strapi world. So far I am very impressed by it. I am eager to start offering clients development on Strapi and not have to use WordPress as a CMS.

One of my resistance from offering Strapi to clients is the behavior of the Default Rich Text Editor. The Strapi v4 default Rich Text Editor field needs improvements.

Just like v3 the default mode is set to markdown and when in preview mode the user can’t edit the content directly. There is the option to expand to have a side by side view of both modes, but it’s redundant. I’m curious why there was a decision for it to have this behavior?

One of the main uses for a CMS is to allow a non-coder the ability to edit the content of a website without having to deal with code. Although markdown is rather easy to understand, it’s still code and general users of the CMS shouldn’t have to see the markdown code.
Having a simple user-friendly Rich Text Editor WYSIWYG is important to any CMS.

Is there any plans to change the default behavior to start in preview mode and allow editing in that mode?

The other solution to this WYSIWYG problem is to use CKEditor5 (https://ckeditor.com/) as a replacement. In v3 there is plugin that did this, but it is not compatible with v4. A v4 version is in development: https://github.com/Roslovets-Inc/strapi-plugin-ckeditor5

I feel ideally it would be best once the plugin is complete, that the CKEditor5 becomes the default editor used in the core installation of Strapi v4.

What is everyone’s thoughts on this?

Krislunde · February 15, 2022, 10:18am

Yo, you’ve probably solved this already but I wanted to direct your attention to something like https://github.com/wizcas/strapi-plugin-wysiwyg-tui-editor

Adam_Genshaft · March 15, 2022, 8:15am

It’s an awesome initiative, but after installing it the editor didn’t change as I expected it to.

Adam_Genshaft · March 15, 2022, 8:18am

It does! As I’ve written here

After running yarn build and reloading the browser with “empty cache and hard reload” it did work as expected

da_kicks_87 · March 15, 2022, 1:06pm

I have brought this issue up on the Strapi Community Call from last month. The devs are aware of this issue.

You can watch the video of it here: Strapi Community Call February - YouTube
Question is asked at the 24:51 mark.

They essential said they are not prioritizing changing it at the moment. There is third party integrations available for the time being. They plan to work on changing the default rich text editor this year at some point.

There is feature request on this issue on their github repo. You can add to the discussion there:

github.com/strapi/strapi

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

opened 10:57PM - 08 Feb 22 UTC

derrickmehaffy

issue: feature request source: core:content-manager source: core:content-type-builder

## Feature request ### Please describe your feature request - [x] **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 - [x] **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 :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). ### 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](https://editorjs.io/) 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) https://github.com/strapi/strapi/issues/10706 https://github.com/strapi/strapi/issues/9770 https://github.com/strapi/strapi/issues/8662 https://github.com/strapi/strapi/issues/4586 https://github.com/strapi/strapi/issues/3865 https://github.com/strapi/strapi/issues/3114 https://github.com/strapi/strapi/issues/2950 https://github.com/strapi/strapi/issues/1291 https://github.com/strapi/strapi/issues/8004 https://github.com/strapi/strapi/issues/6051 https://github.com/strapi/strapi/issues/2505 https://github.com/strapi/strapi/issues/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

da_kicks_87 · April 6, 2022, 7:11pm

For those interested, Strapi’s features requests are now done on a different platform.

Be sure to upvote and to give comments on this request here:

Luis_Alejandro_Lopez · April 29, 2022, 12:33am

Hello Everyone!!
As you mentioned before, Strapi Text Editor has a Markdown Mode, as well as a Preview Mode. Everything looks fine inside the Strapi Text Editor. The thing is that anytime I write something using html tags in the Text editor, the view on my browser is still showing the html tags. Does anyone know why the text appear with the html tags in my front view?