WYSIWYG or What-You-See-Is-What-You-Get is a tool that allows content to be edited in a form that resembles its appearance when displayed.
So far I've tried just Quill and Summernote.
Both are free, open-source and awesome products overall.
While I was searching, I came across other WYSIWYG tools like TinyMCE and CKEditor. They are advanced, feature-rich, more enterprise-level solutions with paid plans.
What's your favourite WYSIWYG editor?
Top comments (17)
Obviously I'm biased therefore I would say ours 😇.
It has been, and still is, developed for our open source web editor for presentations DeckDeckGo.
Fun fact, what a timing, I just published today a new blog post here on DEV about it because I recently re-implemented it to replace the usage of the obsolete
document.execCommand()😉.I'm currently working with Editor.js , a block styled editor.
It's raw data output, leightweight-ness and customizability made it perfect to implement some custom rendering of the data in my Angular frontends - both the public facing pages, as well as the admin dashboard, for a true WYSIWYG feeling, since both things are separate projects (and workspaces) in my case.
I loath TinyMCE.
I really like Draft.js, but it's limited to React.
ProseMirror looks powerful but more complicated to setup than I would like. There are some wrappers for it but so far I haven't found one really like. Also, it has no real TypeScript support, which is almost a dealbreaker for me.
Trix trix-editor.org/
Making it work in react is little difficult tho
Another open-source tool, looks neat and covers all the needs... Thanks for the recommendation, have to check it out in upcoming projects :)
I've been able to get it to work with Vue pretty well. Been a while since I worked with react but I'm happy to lend a hand if you still need help.
Just to clarify, CKEditor is an Open Source, advanced and feature-rich editor which offers free and entreprise level solution plans.
Furthermore: ckeditor.com/wysiwyg-editor-open-s...
We use TinyMce with the angular wrapper (self-hosted) but I would love use literally anything else if I could find something that works in Angular with Typescript without needing dark magic to get it functioning.
It really depends what you're looking for. I haven't had needs for HTML editors, but rather some other kind of rich text (semantic markup based on thesauruses, illustrations that come with their legend, links to other items by their ID, etc. or sometimes more simply tagging people), mostly because the marked up text needs to be included into PDFs and with several HTML renderings. Been using the editor from the defunct Wave (né Google Wave, then Apache Wave in a Box), and currently replacing it with Prosemirror (same schema-based approach).
For that simpler case I mentioned, in a React app, Draft.js by Facebook did the job.
checkout slate js: slatejs.org/examples/richtext if you are working with react
Slate has a lot of cool features, but just tapping around on mobile to place the cursor causes weird errors like text repetition (just confirmed again in the demo you linked).
Yep, it has bug on android specially because the refactor of the current version.
Does anyone knows, which WYSIWYG editor supports Chicago styled quotations? Here is the link for an quote example: citefast.com/styleguide.php?style=.... Thanks guys :)
I have tried the CkEditor, but it has not this feature :(
Redactor