Big news!Introducing Socket AI - ChatGPT-Powered Threat Analysis. Learn more
Socket
Log inDemoInstall

vue-editor-js

Package Overview
Dependencies
2
Maintainers
1
Versions
24
Issues
File Explorer

Advanced tools

vue-editor-js

[![Wallaby.js](https://img.shields.io/badge/wallaby.js-powered-blue.svg?style=for-the-badge&logo=github)](https://wallabyjs.com/oss/)

    2.0.2latest
    GitHub

Version published
Maintainers
1
Weekly downloads
459
decreased by-11.56%

Weekly downloads

Readme

Source

vue-editor-js

Wallaby.js

vue-editor-js is editorjs wrapper component.

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

For before 2.0.0 version users.

This plugins is turned to be just wrapper component. If you need to use plugin for editor.js, just import and set to config property.

Please See the Demo.vue

For before 1.0.0 version users.

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

Supported Plugins

Installation

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) // ... // on 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 initialize Function for get instance of editor.js when initialized

If you confused using on Nuxt, please see here

Local import

You can import Editor only in components where you need it.

  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' Vue.use(VueCompositionApi)
  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: { 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

<editor header list code ... :config="config"/>

Upload Image (>= 1.1.0)

for upload image, You need a backend for processing image. vue-editor-js provide special config props for easy. If you server for test upload 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 :tada:

How to Contribute?

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

OR

  1. Just submit a issue!

Contributors

Wallaby.js

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.

Keywords

FAQs

Last updated on 22 Dec 2020

Did you know?

Socket installs a Github app to automatically flag issues on every pull request and report the health of your dependencies. Find out what is inside your node modules and prevent malicious activity before you update the dependencies.

Install Socket
Socket
support@socket.devSocket SOC 2 Logo

Product

  • Package Issues
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc