Get error 'getBlockByIndex() is not a function' in VUE file.
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.
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.