vue-editor-js is editorjs wrapper component.

Please review this first. https://editorjs.io/

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

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

• Personality
• Header
• List
• Image
• InlineCode
• Embed
• Quote
• Marker
• Code
• Link
• Delimiter
• Raw
• Table
• Warning
• Paragraph
• Checklist

# NPM
npm install --save vue-editor-js

# or Yarn
yarn add vue-editor-js

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

Vue.use(Editor)
// ...

// 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'

Vue.use(Editor)

  <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

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
npm i --save @vue/composition-api

# or Yarn
yarn add @vue/composition-api

2. In main.js:

import Vue from 'vue'
import VueCompositionApi from '@vue/composition-api'

Vue.use(VueCompositionApi)

3. Don't import anything from 'vue-editor-js' in main.js
4. In your component:

import { Editor } from 'vue-editor-js'

export default {
  // ...
  components: {
    Editor,
  },
  // ...
}

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
npm install --save @editorjs/header

# or Yarn
yarn add @editorjs/header

2. Insert the package into the config prop

<editor
    ...
    :config="{
        tools: {
          header: require('@editorjs/header')
        }
    }"
/>

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

		<button @click="invokeSave">Savebutton>
	div>
template>

<script>
	export default {
		methods: {
			invokeSave() {
				this.$refs.editor._data.state.editor.save()
					.then((data) => {
						// Do what you want with the data here
						console.log(data)
					})
					.catch(err => { console.log(err) })
			}
		},
	}
script>

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" />

<script>
...
data() {
  return {
      config: {
        image: {
          // Like in https://github.com/editor-js/image#config-params
          endpoints: {
            byFile: 'http://localhost:8090/image',
            byUrl: 'http://localhost:8090/image-by-url',
          },
          field: 'image',
          types: 'image/*',
        },
      }
  }
}
script>

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

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

Enjoy editorjs with Vue.js Project 🎉

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

OR

1. Just submit a issue!

• ChangJoo Park
• yashha
• Loskir

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.