Search code examples
angulareditorjs

Editor.js Header and other tools do not work on


I am trying to use Editor.js in one of my Angular apps and when I try to configure heading, lists and other blocks, it gives me the following error:

ERROR TypeError: Cannot read property 't' of undefined
    at e.value (bundle.js:10)
    at new e (bundle.js:10)
    at e.value (editor.js:2)
    at e.value (editor.js:2)
    at e.value (editor.js:2)
    at e.value (editor.js:2)
    at e.value (editor.js:2)
    at HTMLLIElement.<anonymous> (editor.js:2)
    at ZoneDelegate.invokeTask (zone-evergreen.js:391)
    at Object.onInvokeTask (core.js:39680)

This is the code snippet of my component.

import { Component, OnInit } from '@angular/core';
import EditorJS from '@editorjs/editorjs';
import Header from '@editorjs/header';
import List from '@editorjs/list';

@Component({
  selector: 'app-editorjs',
  templateUrl: './editorjs.component.html',
  styleUrls: ['./editorjs.component.css']
})
export class EditorjsComponent implements OnInit {

  editor;

  constructor() { }

  ngOnInit() {
    this.editor = new EditorJS({
      holder: 'editor-js',
      tools: {
        header: {
          class: Header,
          shortcut: 'CMD+SHIFT+H',
        },
        list: {
          class: List,
          inlineToolbar: true,
        },
      }
    });
  }

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

The paragraph tool works fine, I get the error only when I try to configure the rest of the tools.


Solution

  • Just remove and reinstall editorjs packages, it should fix the problem.

    I had a similar problem with react-editor-js. It was resolved when I reinstalled it. The error was probably a result of mismatched versions of editorjs and its tool packages.