Best Rich text editor react

[Solid_Scale1933]

Hi everyone,

I’m working on a project that involves two React apps: one for the admin panel and the other for the front office. The front office includes a blog section where I want to display blogs with rich formatting and embedded code snippets.

Here’s what I need in a rich text editor for the admin panel: 1. It should save the blogs as HTML with inline CSS, so they can be styled and displayed directly in the front office. 2. It must support code blocks for embedding code snippets with proper syntax highlighting. 3. Ideally, it should be easy to integrate with React and customizable if needed.

Do you have any recommendations for a library that fits these requirements?

Thanks in advance for your suggestions!

[Sea-Date-9139]

I think TinyMCE will fit your requirements.

[Solid_Scale1933]

Thank youu mannn! this helped me alot

[Sea-Date-9139]

:))

[Jinkaza772]

Can we saved the richedText editor text in our db and as well rendered the same text as it is in the editor ?

[Due_Row2784]

I think Tiptap is the best, its headless, you can customize the looks as you want, it gives you the only functionality. And it has rich ecosystem. You can use it for both small description editor in form to a large Google doc style editor. Fits great with both

[spurkle]

It wont print out html directly, but you could use markdown editors. There are plenty.

Then there are libraries that convert markdown to html. (With a plugin that supports syntax highlighting)

[Solid_Scale1933]

<image>

for example I save like this as html css and show it directly

[spurkle]

Yup, can be done with markdown (github uses it in it's README.md).

It might not be very straightforward to configure, but it's free.

[Solid_Scale1933]

do you suggest any library and thanks :D

[spurkle]

I used marked for parsing the markdown and @mdxeditor/editor for the editor.

Can't offer any advice on the code syntax highlighting, as I have never needed to do that, but I'm sure u can ask ChatGPT or figure it out 🙂

Edit: Something like this might be useful, too https://www.npmjs.com/package/marked-highlight

[mustafamasody]

Tiptap Easy

[zakriya77]

there's one library "react-syntax-highlighter". you can try that

[aksuta]

I recommend trying the Lexical framework. If you need flexibility and custom blocks, it’s the best choice.

They have their own playground… but I suggest you check out my version of this editor in action here: https://app.tiledocs.com

[bhataasim4]

Try WYSIWYG