DEV Community

lumenwrites
lumenwrites

Posted on

What is the best way to implement a WYSIWYG editor?

Hi! I'm building a react app that needs a very powerful and customizable WYSIWYG editor. I will start by implementing things that Ghost, Medium, Typora, and Gitbook editor can do, and then maybe need to add other powerful features including collaboration. My project is in early prototype stage, so I don't even know what kind of features I may need to build in the future.

What are my best options, which libraries should I consider?

Did anyone experiment with Slate.js, ProseMirror, Tiptap, other libraries I may not be aware of? Which ones are the most flexible/powerful, and future proof enough to build a long term project around?

Also, a side question - how hard is it to implement google-docs-like pagination in a WYSIWYG web text editor? I've asked on Slate.js chat, and apparently it's very hard, although I don't quite understand the reasons and details. Any tips on tackling that?

Top comments (7)

Collapse
 
anesu profile image
Anesu Kafesu

Quill.js is my personal favourite

Collapse
 
rizkytegar profile image
🎉 Rizky Tegar Pratama

I wear it too

Collapse
 
bpsagar profile image
Sagar Chakravarthy

We have used Codemirror for Resumey.Pro's markdown editor. I've heard good things about Prosemirror and been meaning to switch to this. Haven't tried it out yet though.

You could check out Draft JS by Facebook as well.

Collapse
 
srinivaassunil profile image
sunil

Try editor js. I have used it in lot of projects.

Collapse
 
ksengine profile image
Kavindu Santhusa

Editor.js working finely on both desktop and mobile.

Collapse
 
sroehrl profile image
neoan

Jodit and tinymce are libraries you might also want to look into

Collapse
 
baloraki profile image
baloraki

I would suggest ck5editor.
I have done a lot with ck4editor, and am mega satisfied.
Also ckeditor has a lot of plugins.