DEV Community


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)

anesu profile image
Anesu Kafesu

Quill.js is my personal favourite

rizkytegar profile image
πŸŽ‰ Rizky Tegar Pratama

I wear it too

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.

srinivaassunil profile image

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

ksengine profile image
Kavindu Santhusa

Editor.js working finely on both desktop and mobile.

sroehrl profile image

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

baloraki profile image

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