editor.js icon indicating copy to clipboard operation
editor.js copied to clipboard

Get error 'getBlockByIndex() is not a function' in VUE file.

Open jsperorg opened this issue 4 years ago • 3 comments

Get error 'getBlockByIndex() is not a function' in VUE file.

Editorjs version: 2.22.2

Code of my editorjs.vue :

<template>
  <div id="editorjs"></div>
  <div><button @click="printBlock()">Print Block</button></div>
</template>
<script>
import EditorJS from '@editorjs/editorjs'
import Header from '@editorjs/header'
import CourseVideo from './course/video/course-video' // my custom block plugin class.

export default {
  data() {
    return {
      editor: null
    }
  },
  created() {
    // Initialize editor
    this.editor = new EditorJS({
      holder: 'editorjs',
      tools: {
        header: Header,
        courseVideo: CourseVideo
      },
      data: {
        time: Date.now(),
        blocks: [
          {
            type: 'header',
            data: {
              text: 'Hello world!'
            }
          },
          {
            type: 'courseVideo',
            data: {
              width: '600',
              height: '300'
            }
          }
        ],
        version: '2.11.10'
      }
    })
  },
  methods: {
    printBlock() { // when click the button will execute this function
      console.log(this.editor); // normal output
      const block = this.editor.getBlockByIndex(0); // report error: this.editor.getBlockByIndex is not a function
      console.log('block', block);
    }
  }
}
</script>

code of my course-video.js:

class CourseVideo {
  constructor({data, block}){
    this.data = data;
    this.block = block;
  }
  get toolbox() {
    ...
  }
  render() {
    ...
  }
  renderSettings() {
    ...
  }
  save(video) {
    ...
  }
}

I created a custom block plugin for editor and import it in vue file, i want to access function of custom plugin class in vue, I refer to the official sample page for BlockAPI (https://editorjs.io/blockapi) to implement that, at run time, the editor can load and display normally, but when i click 'Print Block', the console of browser report error: 'getBlockByIndex() is not a function'. I think my usage is consistent with the official example, i don't know what the problem is, or how to access function of block in vue? Thanks.

jsperorg avatar Aug 05 '21 02:08 jsperorg

I have this issue as well. You can easily see this in a plain js stackblitz. I'd love to be able get the save data per block id/index.

Eonasdan avatar Jul 29 '22 18:07 Eonasdan