Vue Editor Js Save

editor.js for Vue users

Project README



vue-editor-js is editorjs wrapper component.

Please review this first.

For before 2.0.0 version users.

This plugins is a wrapper component for editorjs. If you need to use the plugin for editor.js then import it and set the config property.

Please See the Demo.vue

For before 1.0.0 version users.

Please use Vue.use vue-editor-js in main.js.

Supported Plugins


npm install --save vue-editor-js

# or Yarn
yarn add vue-editor-js


In main.js

// ...
import Editor from 'vue-editor-js'

// ...

In Nuxt.js

// in nuxt.config.js
plugins: [
    src: '~/plugins/vue-editor.js', ssr: false

// in ~/plugins/vue-editor.js
import Vue from 'vue'
import Editor from 'vue-editor-js'

  <editor ref="editor" :config="config" :initialized="onInitialized"/>

Define the initialization function to get the instance of editor.js when initializing

If you are confused with using it with Nuxt, please see here

Local import

If you wish to only import Editor on a single component then you can do so by following the instructions below

  1. Make sure to install @vue/composition-api
npm i --save @vue/composition-api

# or Yarn
yarn add @vue/composition-api
  1. In main.js:
import Vue from 'vue'
import VueCompositionApi from '@vue/composition-api'

  1. Don't import anything from 'vue-editor-js' in main.js
  2. In your component:
import { Editor } from 'vue-editor-js'

export default {
  // ...
  components: {
  // ...


Supported tools

Same as in Supported Plugins, but with different naming

  • header
  • list
  • code
  • inlineCode
  • personality
  • embed
  • linkTool
  • marker
  • table
  • raw
  • delimiter
  • quote
  • image
  • warning
  • paragraph
  • checklist


  1. Install the editorjs tool
npm install --save @editorjs/header

# or Yarn
yarn add @editorjs/header
  1. Insert the package into the config prop
        tools: {
          header: require('@editorjs/header')

Saving Example Code

	<div id="app">
		<Editor ref="editor" :config="config" />

		<button @click="invokeSave">Save</button>

	export default {
		methods: {
			invokeSave() {
					.then((data) => {
						// Do what you want with the data here
					.catch(err => { console.log(err) })

Upload Image (>= 1.1.0)

for uploading images, You will need a backend for processing the images. vue-editor-js provides a special config prop for easability. If you are testing your server to upload an image, please see server example.

<editor :config="config" />

data() {
  return {
      config: {
        image: {
          // Like in
          endpoints: {
            byFile: 'http://localhost:8090/image',
            byUrl: 'http://localhost:8090/image-by-url',
          field: 'image',
          types: 'image/*',

upload personality avatar ( >= 2.0.1)

  config: {
    personality: {
      endpoints: 'http://localhost:8090/image'

Other props:

  • customTools - Object with name (key) and class of a custom tool (value)

Enjoy editorjs with Vue.js Project :tada:

How to Contribute?

  1. fork this project.
  2. edit code.
  3. PR


  1. Just submit a issue!




This repository contributors are welcome to use Wallaby.js OSS License to get test results immediately as you type, and see the results in your editor right next to your code.

Open Source Agenda is not affiliated with "Vue Editor Js" Project. README Source: ChangJoo-Park/vue-editor-js

Open Source Agenda Badge

Open Source Agenda Rating