outafrica / vue-editor-js

editor.js for Vue users

vue-editor-js

vue-editor-js is editorjs wrapper component.

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

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

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

Installation

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

# or Yarn
yarn add vue-editor-js

Usage

In main.js

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

Vue.use(Editor)
// ...

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'

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

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
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,
  },
  // ...
}

Tools

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

Usage

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')
        }
    }"
/>

Saving Example Code

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

		<button @click="invokeSave">Save</button>
	</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>

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

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

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 🎉

How to Contribute?

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

OR

1. Just submit a issue!

Contributors

• ChangJoo Park
• yashha
• Loskir

Wallaby.js

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.