How to use Editor.js with Angular 14

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

So, let's get started...

In this article, you will learn,

• What is Editor.js
• Features of editor.js
• Use Editor.js with angular
• Plugins with Editor.js
• How to save Editor.js data
• Convert JSON data to HTML

What is Editor.js?

The editor.js is a block-styled editor.

Editor.js Features:

Block style editor

In the editor, each piece of material is a block. A block could be a sentence, a header, an image, or anything else. Such editors are becoming increasingly popular.

Documentation 

There is excellent documentation with easy explanations.

Documentation link: https://editorjs.io/base-concepts

JSON Output

JSON is the format used for the final generated data. This is a significant benefit. Many editors today store data as markdown or HTML markup. But the addition of JSON makes it very simple to increase functionality.

Supports Plugins

You can create your own plugin to increase the editor's capabilities.

In plugins, anything is possible, including calling APIs, altering data, and improving user interfaces.

The ecosystem of plugins enables you to create more dynamic and rich content than you could with standard editors.

In the below GitHub repository, you can find some awesome plugins that can be used within it:

https://github.com/editor-js/awesome-editorjs

So, now let's give it a try and create a sample application using angular.

How to use Editor.js with Angular 14

Prerequisites:

We assume that you have Basic Angular Project Setup in your system, if not please take a look at How To Install Angular 14 – Tutorial

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:

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);
      });
  }

Call created save method on HTML

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

Convert JSON data to HTML Version

Install parser plugin:

npm i editorjs-parser

Use the parse method in the 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);
      });
  }
}

Resources:

Official Website: https://editorjs.io

Plugins and other stuff: https://github.com/editor-js/awesome-editorjs

Conclusion:

Thanks for reading this article 🙏.

Do let me know If you face any difficulties please feel free to comment below we love to help you.

if you have any feedback suggestion then please inform us by commenting.

Don’t forget to share this tutorial with your friends on Facebook and Twitter