angular

How to use Editor.js with Angular 11

How to use Editor.js with Angular 11

In this tutorial, we will learn about how to use Editor.js with angular 11

So, let get started...

How to use Editor.js with Angular 11

Step-1: Install Editor.js

npm i @editorjs/editorjs --save

Step-2: Create a new component

ng g c editorjs

Step-3: Import editor-js in component:

Go to top of your editosjs.component.ts files and add below code:

import { Component, OnInit } from "@angular/core";

import EditorJS from "@editorjs/editorjs";

@Component({
  selector: "app-editorjs",
  templateUrl: "./editorjs.component.html",
  styleUrls: ["./editorjs.component.scss"],
})

export class EditorjsComponent implements OnInit {
  
  editor: any;

 ngOnInit(): void {
    this.editor = new EditorJS( {
      holderId: 'editor-js',
     
    });
  }


}

Then go to HTML template file and add below code:

<div id="editor-js"></div>

Step : 4: Run Application

Now run your application using ng serve command and you'll be ablt to see EditorJs active.

Add plugins to Editor-js

As of now our editor is working but not have enough tools to make it usefull, let's make it usefull with using some plugins:

Step:1: Install plugins

npm i @editorjs/header @editorjs/list @editorjs/marker

above command will insert some comman required plugins for writting.

Step:2 : Import plugins

Go to editorjs.component.ts file and import plugins as shown below:

.......................
import Header from '@editorjs/header';
import List from '@editorjs/list';
import Marker from '@editorjs/marker';
......................

 this.editor = new EditorJS( {
      holderId: 'editor-js',
      tools: {
        header: {
          class: Header,
          inlineToolbar: ['link']
        },
        list: {
          class: List,
          inlineToolbar: ['link', 'bold']
        },
        marker: {
          class: Marker,
          shortcut: 'CMD+SHIFT+M'
        }
      }
    });

Now run your application again you'll be able to see these imported plugins in the editor also.

Save Editor JS Data:

Step:1 : Create method in editosjs.component.ts as below:

 onSave() {
    this.editor
      .save()
      .then((outputData) => {
        console.log('Article data: ', outputData);
      })
      .catch((error) => {
        console.log('Saving failed: ', error);
      });
  }

Step:2: Call created save method on html

<button (click)="onSave()">Save</button>

Convert JSON data to HTML Version

Step-1: Install parser plugin:

npm i editorjs-parser

Step-2: Use parse method in onSave method:

.....................
parser = new edjsParser(undefined, this.customParsers);
......................


onSave() {
    this.editor
      .save()
      .then((outputData) => {
        console.log('HTML data: ',  this.parser.parse(jsonData););
        
      })
      .catch((error) => {
        console.log('Saving failed: ', error);
      });
  }
}

If You Appreciate What We Do Here On TutsCoder, You Should Consider:

If you like what you are reading, please consider buying us a coffee ( or 2 ) as a token of appreciation.

Support Us

We are thankful for your never ending support.

Leave a Comment