DEV Community

lumenwrites
lumenwrites

Posted on

5 2

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.

Cloudinary image

Optimize, customize, deliver, manage and analyze your images.

Remove background in all your web images at the same time, use outpainting to expand images with matching content, remove objects via open-set object detection and fill, recolor, crop, resize... Discover these and hundreds more ways to manage your web images and videos on a scale.

Learn more

πŸ‘‹ Kindness is contagious

Please leave a ❀️ or a friendly comment on this post if you found it helpful!

Okay