Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ChangJoo-Park/vue-editor-js
editor.js for Vue users
https://github.com/ChangJoo-Park/vue-editor-js
editor editorjs plugin vue vue-composition-api vue-editor-js vue3 wysiwyg-editor wysiwyg-js-editor
Last synced: about 1 month ago
JSON representation
editor.js for Vue users
- Host: GitHub
- URL: https://github.com/ChangJoo-Park/vue-editor-js
- Owner: ChangJoo-Park
- License: mit
- Created: 2019-04-03T05:25:31.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-03-06T17:28:06.000Z (almost 2 years ago)
- Last Synced: 2024-10-12T09:09:31.525Z (2 months ago)
- Topics: editor, editorjs, plugin, vue, vue-composition-api, vue-editor-js, vue3, wysiwyg-editor, wysiwyg-js-editor
- Language: JavaScript
- Homepage: https://codesandbox.io/embed/o7lyqwmvmq
- Size: 2.7 MB
- Stars: 358
- Watchers: 8
- Forks: 76
- Open Issues: 48
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- awesome-web-editor - vue-editor-js - editor.js wrapper component for Vue.js (Rich text editor)
- awesome-editorjs - vue-editor-js
- awesome-fe-resources - vue-editor-js
README
# vue-editor-js
[](https://wallabyjs.com/oss/)
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](https://github.com/ChangJoo-Park/vue-editor-js/blob/master/demo/Demo.vue)
## For before 1.0.0 version users.
Please use `Vue.use` vue-editor-js in main.js.
## Supported Plugins
- [Personality](https://github.com/editor-js/personality)
- [Header](https://github.com/editor-js/header)
- [List](https://github.com/editor-js/list)
- [Image](https://github.com/editor-js/image)
- [InlineCode](https://github.com/editor-js/inline-code)
- [Embed](https://github.com/editor-js/embed)
- [Quote](https://github.com/editor-js/quote)
- [Marker](https://github.com/editor-js/marker)
- [Code](https://github.com/editor-js/code)
- [Link](https://github.com/editor-js/link)
- [Delimiter](https://github.com/editor-js/delimiter)
- [Raw](https://github.com/editor-js/raw)
- [Table](https://github.com/editor-js/table)
- [Warning](https://github.com/editor-js/warning)
- [Paragraph](https://github.com/editor-js/paragraph)
- [Checklist](https://github.com/editor-js/checklist)
## Installation
```bash
# NPM
npm install --save vue-editor-js
# or Yarn
yarn add vue-editor-js
```
## Usage
### In main.js
```js
// ...
import Editor from 'vue-editor-js'
Vue.use(Editor)
// ...
```
### In Nuxt.js
```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)
```
```Vue
```
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](https://github.com/ChangJoo-Park/vue-editor-on-nuxt)
## 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`
```bash
# NPM
npm i --save @vue/composition-api
# or Yarn
yarn add @vue/composition-api
```
2. In main.js:
```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:
```js
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
```bash
# NPM
npm install --save @editorjs/header
# or Yarn
yarn add @editorjs/header
```
2. Insert the package into the config prop
```vue
```
#### Saving Example Code
```vue
Save
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) })
}
},
}
```
## 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](https://github.com/ChangJoo-Park/vue-editor-js-imageserver).
```vue
...
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/*',
},
}
}
}
```
## upload personality avatar ( >= 2.0.1)
```js
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
_OR_
1. Just submit a issue!
## Contributors
- [ChangJoo Park](https://github.com/changjoo-park)
- [yashha](https://github.com/yashha)
- [Loskir](https://github.com/Loskir)
## Wallaby.js
[](https://wallabyjs.com/oss/)
This repository contributors are welcome to use
[Wallaby.js OSS License](https://wallabyjs.com/oss/) to get
test results immediately as you type, and see the results in
your editor right next to your code.