Integrate Medium editor in angular 8

Angular Jun 13, 2019

ANGULAR EXPERIMENTS

Integrate Medium editor in angular 8

Let's Step by step Integrate Medium Editor in angular 8

Here is the Demo of what we will make



An image can express in better way



In this article, we will try to create a small editor like a medium

Step 1 :

so first thing first create a project in angular

and you can use bootstrap to make it pretty good just add CDN links under the
index.html

ng g new mediumeditor

This command will generate an angular starter application once it has completed
installing the dependencies and all

Step 2:

Install an npm package Mentioned below

npm install medium-editor --save

Include the css and js in angular.json file

"styles": [
              "src/styles.scss",
                "node_modules/medium-editor/dist/css/medium-editor.min.css",
               "node_modules/medium-editor/dist/css/themes/default.css"
            ],
            "scripts": ["node_modules/medium-editor/dist/js/medium-editor.min.js"]

Step 3:

create a component as per your choice name ill create one with name create

ng g c create

Step 4 :

go to newly created component.html and make a div and give it a template
reference of name lets say the editable

<div class="container mt-3 ">
    <div class="row justify-content-center">
            <div 
 class=' col-8' 
                    style="min-height: 85vh">   
           </div>
  </div>

</div>

Just wrapped it under some bootstrap classes to give basic stylings but the main
thing is div with a template reference editable

Step 4 :

Go to your component class

make a variable editor and a view child property name editable as bellow

editor:any;
  
('editable',{
    static:true
  }) editable:ElementRef;

Step 5 :

now we will be using one lifecycle hook of angular that is ngAfterViewInit

if you want to know more about it you can read here

ngAfterViewInit(): void {
    this.editor = new MediumEditor(this.editable.nativeElement)
}

and this may give you an error like media editor is not defined in that case we
may need to declare it at the top like

declare var MediumEditor:any;

And with these changes, you have almost created a small-medium editor for your
self give it a shot and you should see a cursor on your screen

and you can write over their just select the text you have written and you see
the magic

Step 6:

now let's say you need more options in your editor toolbar for that we have to
pass a configuration object in the MediumEditor Constructor so, I have created a
default one

ngAfterViewInit(): void {
    this.editor = new MediumEditor(this.editable.nativeElement,{
    
  });
  }

and with changes, you will have lots of option available

Step 7:


Now that you have an editor how to get data from it like if someone writes a
post then we should get HTML of that post write

So what we will do is we will divide our Screen into two halves in one half we
will have the editor and in the other half we will show the preview of the post

we will modify our create.component.html a bit

<div class="container mt-3 ">
    <div class="row justify-content-center">
            <div #editable class=' col-6' style="min-height: 85vh"></div>
            <div *ngIf="editor"  class="shadow col-6" 
></div>
    </div>

</div>

note in the second div we are assigning the value of inner HTML as

the editor is basically the medium editor if you remember in ngafterviewinit we
are storing the result of new MediumEditor(..) in the editor variable and we are
using the same above

So that it play with it and create something amazing

So the final code will be

//Index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>MediumEditor</title>
  <base href="/">
  <link rel="stylesheet" href="
" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

create.Component.html

<div class="container mt-3 ">
    <div class="row justify-content-center">
            <div #editable class=' col-6' style="min-height: 85vh"></div>
            <div *ngIf="editor"  class="shadow col-6" [innerHTML]="editor.elements[0].innerHTML"></div>
    </div>

</div>

create.component.ts

import { Component, OnInit, AfterViewInit, ViewChild, ElementRef } from '
';
declare var MediumEditor:any;
({
  selector: 'app-create',
  templateUrl: './create.component.html',
  styleUrls: ['./create.component.scss']
})
export class CreateComponent implements OnInit,AfterViewInit {
  editor:any;
  
('editable',{
    static:true
  }) editable:ElementRef;
  ngAfterViewInit(): void {
    this.editor = new MediumEditor(this.editable.nativeElement,{
      paste: {
        /* This example includes the default options for paste,
           if nothing is passed this is what it used */
        forcePlainText: false,
        cleanPastedHTML: true,
        cleanReplacements: [],
        cleanAttrs: ['class', 'style', 'dir','name'],
        cleanTags: ['meta'],
        unwrapTags: []
    },
      toolbar: {
          /* These are the default options for the toolbar,
             if nothing is passed this is what is used */
          allowMultiParagraphSelection: true,
          buttons: BUTTONS,
          diffLeft: 0,
          diffTop: -10,
          firstButtonClass: 'medium-editor-button-first',
          lastButtonClass: 'medium-editor-button-last',
          relativeContainer: null,
          standardizeSelectionStart: false,
          static: false,
          /* options which only apply when static is true */
          align: 'center',
          sticky: false,
          updateOnEmptySelection: false
      }
  });
  }

constructor() { }

ngOnInit() {
  }

}

const BUTTONS = [
'bold'
,'italic'
,'underline'

,'subscript'
,'superscript'
,'anchor'
,'quote'
,'pre'
,'orderedlist'
,'unorderedlist'
,'indent' 
,'justifyLeft'
,'justifyCenter'
,'justifyRight'
,'justifyFull'
,'h1'
,'h2'
,'h3'
,'h4'
,'h5'
,'h6'

]

Thanks a lot

Visit Smartcodehub For more angular tutorials

Neeraj Dana

Experienced Software Engineer with a demonstrated history of working in the information technology and services industry. Strong engineering professional visit www.smartcodehub.com