Rich Text Editor for Angular

Thiago Passos -

Okay, so I've published my very first npm package. Let's start from the beginning. We've got an internal MVC application that uses the Kendo UI from Progress, the rich text editor to be more specific. We started migrating that application to Angular and, to our surprise, the editor was not available for Angular as yet.

What do we do from here? One of the options was to use the Kendo UI for jQuery and hack it so it works with Angular. Well, I know that sounds dirty and half way through doing it, I had the wash my hands and say "That's enough!".

We then called John Bristowe from Progress to help us make a decision on that and, to our surprise, he suggested us to try ProseMirror as both Progress and DevExpress were evaluating/using it. I gave it a go and looked beautiful. I've even found a great implementation for Vue.js called tiptap.

One of the beauties of ProseMirror is that it handles markdown quite elegantly and that's why we wanted to leverage it.

The problem was I couldn't find an easy implementation for Angular which made my life quite hard but interesting. So I decided to roll my own npm package to simplify the implementation and maybe to help others out there.

Here it is: https://www.npmjs.com/package/ngx-prosemirror

Be aware it's really really really early days, I just published and there's a lot of work to do. If you want to help me out, go to the GitHub repository and give it a go.

Instructions

  • npm i ngx-prosemirror
  • Import the NgxProsemirrorModule to your module
  • Add to your component
<ngx-prosemirror [(content)]="contentInMarkdown"></ngx-prosemirror>

Hope it helps.

Cheers.