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
- Make sure to install
@vue/composition-api
# NPM
npm i --save @vue/composition-api
# or Yarn
yarn add @vue/composition-api
- In main.js:
import Vue from 'vue'
import VueCompositionApi from '@vue/composition-api'
Vue.use(VueCompositionApi)
- Don't import anything from
'vue-editor-js'
in main.js - 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
- Install the editorjs tool
# NPM
npm install --save @editorjs/header
# or Yarn
yarn add @editorjs/header
- 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">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>
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 ๐
- fork this project.
- edit code.
- PR
OR
- 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.