#Rich text editor js code#

Collaborative editing - now, initially, I wanted CodeWrite to be for individual code-bloggers, but I always planned to support “live collab” down the line.With that said, I did think about making CodeWrite for mobile one day and so wanted my framework of choice to support it. Apart from that, it’s challenging to provide proper editing and coding experience on small, touch-only devices without a physical keyboard. Mobile support - as a desktop browser extension, CodeWrite wasn’t intended for mobile.The “good-to-have”s, as I called them, were those features that I knew I won’t use right-away but would be useful down the line. Good to haveĪpart from everything already listed, I did have even more requirements. Add syncing cursor between inner and outer editors to all this, and you’ve got a pretty complex setup on your hands. Also, you have to be able to edit the content within any of these instances, including operations like select, copy, paste, etc. They can’t be embedded through, as multiple separate Monaco Editor instances would bring any device to its knees.

#Rich text editor js code#

This meant that code snippets should be treated properly as well - with something like CodeMirror, or Monaco Editor - which, in turn, meant embedding an editor within an editor!Įditable embeds differ from traditional ones like s, as they’re much more interactive. To provide the best technical blogging experience, I wanted to have both the best writing and coding experience. Different structures work better or worse with tools like Grammarly.Īlthough one could argue that such issues should be solved on Grammarly’s side, they can’t possibly account for every possible contenteditable structure out there, and so a little help is necessary. That’s because of the differences in the handling of contenteditable elements. You know these browser extensions that provide you with AI grammar checking on every input, like, e.g., Grammarly? Those work really well in plain s but often struggle in complex, rich text editors. SpecificsĪpart from the basics, I had some additional requirements that were very specific to what I wanted CodeWrite to be. Of course, we also look for the quality of maintenance, community size, documentation, and ease-of-use of API.

“Out-of-the-box” support for basic operations - history, undo, redo, copy, paste.Įxcept for deep customization and Markdown input rules, these are all functionalities that you should expect every modern framework to provide.

deep UI customization and flexibility, the ability to create formatting toolbars, “block” side menus, floating toolbars, etc.

ability to use and define custom keyboard shortcuts and Markdown input rules (important for developers, dynamically changing input MD to formatted content).

embeds and other block content support - s, lists, blockquotes, etc.

rich inline content formatting, with options for customization and extension of the provided functionality.

So, what are they? The basicsįor the baseline of features that the framework has to have, I’ve chosen the ones which CodeWrite definitely required. With that said, CodeWrite is the product that determined my framework requirements. It has a form of a browser extension + PWA hybrid providing an auto-filling system for popular blogging platforms and a dedicated rich content editor. So, this whole list is based on in-depth research I’ve done while working on my first product - CodeWrite, a blogging tool for developers.ĬodeWrite was created to provide the best technical blogging and cross-posting experience possible. In this blog post, I’d like to present you with my top picks for the best JS rich text editor frameworks for 2021.

Thankfully, with the plethora of JavaScript frameworks and libraries, created with the sole purpose of building rich web-based editing experiences, you’ll never again have to deal with the evil that is contenteditable. Whenever you want to go beyond plain or and enable visible, interactive formatting in your editor, you have to go the contenteditable route and build a proper rich editor. Rich text editors, also known as WYSIWYG (What You See Is What You Get) editors are everywhere - comment sections, forums, online text editors.