Editorjs Component

editor-js-component

Installation

# NPM
npm install --save editor-js-component
# or Yarn
yarn add editor-js-component
# or Pnpm
pnpm add editor-js-component

Usage

import { useEditorjs } from 'editor-js-component'
const editorInstance = useEditorjs({
 holder, 
 readonly,
 autofocus,
 blockToolbar,
 customPlugin,
 pluginConfig,
 editorConfig,
 disablePlugin,
 data,
 messages,
 editorjs: null,
 onStart: ({ data }) => {
 
 },
 onReady: ({ data }) => {
 
 },
 onChange: ({ data }) => {
 
 },
 onDestroy: ({ data }) => {
 
 },
})

API

editorjs-component-vue

import { EditorJsVue, EditorJsParser } from 'editorjs-component-vue'

<div class="editor-wrap">
 <EditorJsVue
 class="editor-left"
 ref="editor"
 :data="data"
 :messages="i18nMessage"
 :initialized="onInitialized"
 :tool-config="toolConfig"
 @changeData="editorChange"
 />
 <div class="editor-right">
 <EditorJsParser :block-list="blockList"></EditorJsParser>
 </div>
</div>

const blockList = ref([])
const toolConfig = ref({
 image: {
 config: {
 customUpload: {
 uploadByCallback({ uploadSuccess }) {
 uploadSuccess({ url: 'https://editorjs.io/_nuxt/api-image_2x.aa04c3de.jpg' })
 }
 },
 uploader: {
 uploadByFile(file) {
 return uploadImage(file)
 }
 },
 endpoints: {
 byFile: 'http://localhost:8008/uploadFile', // Your backend file uploader endpoint
 byUrl: 'http://localhost:8008/fetchUrl' // Your endpoint that provides uploading by Url
 }
 }
 },
 link: {
 config: {
 getSelection(selection) {
 rangeSelection = selection
 },
 searchLinkData(search) {
 const list = [
 { name: 'xx1', href: 'https://xxx.com', description: '' }
 { name: 'xx2', href: 'https://xxx.com', description: '' }
 { name: 'xx3', href: 'https://xxx.com', description: '' }
 ]
 const result = list.filter((item) => item.name.includes(search))
 return Promise.resolve({
 items: result,
 success: true
 })
 }
 }
 }
})
const onInitialized = (editor) => {
 editorInstance.value = editor
}
const editorChange = ({ json }) => {
 blockList.value = json.blocks
}

Supported Plugins