Rich Text Editor With Quill.js and Vue.js - Vue2Editor

Install & Download:

# Yarn
$ yarn add vue2-editor
# NPM
$ npm i vue2-editor

Description:

A customizable WYSIWYG editor built with Vue and Quill editor.

How to use it:

1. Import and register the editor.

// basic import
import { VueEditor } from "vue2-editor";
// with quill API
import { VueEditor, Quill } from "vue2-editor";

export default {
  components: {
    VueEditor
  },
};

2. Add the vue-editor component to the app template.

<template>
  <div id="app">
    <vue-editor v-model="content"></vue-editor>
  </div>
</template>

export default {
  components: {
    VueEditor
  },
  data() {
    return {
      content: "<h1>Initial Content</h1>"
    };
  }
};

3. Available props.

id: {
  type: String,
  default: "quill-container"
},
placeholder: {
  type: String,
  default: ""
},
value: {
  type: String,
  default: ""
},
disabled: {
  type: Boolean
},
editorToolbar: {
  type: Array,
  default: () => []
},
editorOptions: {
  type: Object,
  required: false,
  default: () => ({})
},
useCustomImageHandler: {
  type: Boolean,
  default: false
},
useMarkdownShortcuts: {
  type: Boolean,
  default: false
}