Integrate Medium editor in angular 8
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
Comments ()