WYSIWYG editor for Angular 2+

Reading Time: 2 minutes

So I came across this library while looking for a minimal WYSIWYG editor (What you see is what you get) for a customers Angular project.

The library is called MediumEditor. It is under the MIT license (free), and was not too much of a hassle setting up.

To get started, run “npm i –save medium-editor”. Alternatively you could just add the CDN to index.html.
For it to be available to your application you need to add it’s script and style path in the “.angular-cli.json” scripts and styles variable like this:

"styles": [
"scripts": [

In the component(s) you wish to use it you import MediumEditor like this:

import * as MediumEditor from 'medium-editor';

Create the HTML element you wish the editor to reside within into your template file and give it a class or id.

<div class="editor"></div>

In order to initiate MediumEditor you do it via the AfterViewInit interface like this:

ngAfterViewInit() {
  // If you wish to add existing HTML into it, you can do it like this.

If you have a need for it to update the contents of the editor upon external change events (@Input), simply use the “setContent()” function in the “ngOnChanges” function from the “OnChanges“.

ngOnChanges(change) {
  if (change.variable && change.variable.currentValue && this.medium) {

Now, lets say you wish to fetch the content of the editor. To do this use the “getContent(index)” function.
In my case, I only have one editor open at a time so I just pass it 0 as the index.


And thats it. Thank you for reading.

I did not notice this when I made the implementation, but there is a package for Angular available @ https://www.npmjs.com/package/ng2-meditor. The setup of installing medium as above is still useful imo instead of using a CDN.

Handy extensions:

Leave a Reply

Your email address will not be published. Required fields are marked *