Vue2 Quill Editor

HTML Editor using Vue.js 2.0 and Quilljs

Vue.js

Quill

Install

You can use Yarn or NPM

$ npm install --save vue2-quill-editor

OR

yarn add vue2-quill-editor

Usage

import { VueEditor } from 'vue2-quill-editor'
 
//... your code

Props

Name	Type	Default	Description
id	String	quill-container	Set the id (necessary if multiple editors in the same view)
v-model	String	-	Set v-model to the the content or data property you wish to bind it to
placeholder	String	-	Placeholder text for the editor
disabled	Boolean	false	Set to true to disable editor
editorToolbar	Array	** Too long for table. See toolbar example below	Use a custom toolbar

Example

Basic Setup

<template>
   <div id="app">
     <vue-editor v-model="content"></vue-editor>
   </div>
 </template>
 
 <script>
   import { VueEditor } from 'vue2-quill-editor'
 
   export default {
 
   components: {
      VueEditor
   },
 
   data() {
       return {
         content: '<h1>Some initial content</h1>'  
       }
     }
   }
 </script> 

Example

Set Contents After Page Load

<template>
  <div id="app">
    <button @click="setEditorContent">Set Editor Contents</button>
    <vue-editor v-model="htmlForEditor"></vue-editor>
  </div>
</template>
 
<script>
  import { VueEditor } from 'vue2-quill-editor'
 
  export default {
    components: {
      VueEditor
    },
 
    data() {
      return {
        htmlForEditor: null  
      }
    },
 
    methods: {
      setEditorContent: function() {
        this.htmlForEditor = '<h1>Html For Editor</h1>'
      }
    }
  }
</script> 

Example

Using Multiple Editors

<template>
  <div id="app">
    <vue-editor id="editor1" v-model="editor1Content"></vue-editor>
    <vue-editor id="editor2" v-model="editor2Content"></vue-editor>
  </div>
</template>
 
<script>
  import { VueEditor } from 'vue2-quill-editor'
 
  export default {
    components: {
      VueEditor
    },
 
    data() {
      return {
        editor1Content: '<h1>Editor 1 Starting Content</h1>',
        editor2Content: '<h1>Editor 2 Starting Content</h1>',
      }
    }
  }
</script> 
 
<style>
  #editor1, #editor2 {
    height: 350px;
  }
</style> 

Example

Custom Toolbar

<template>
  <div id="app">
    <vue-editor v-model="content" :editorToolbar="customToolbar"></vue-editor>
  </div>
</template>
 
<script>
  import { VueEditor } from 'vue2-quill-editor'
 
  export default {
    components: {
      VueEditor
    },
 
    data() {
      return {
        content: '<h1>Html For Editor</h1>',
        customToolbar: [
            ['bold', 'italic', 'underline'],
            [{ 'list': 'ordered'}, { 'list': 'bullet' }],
            ['image', 'code-block']
          ]
      }
    }
  }
</script> 

Example

Saving the Content

<template>
  <div id="app">
    <button @click="saveContent"></button>
    <vue-editor v-model="content"></vue-editor>
  </div>
</template>
 
<script>
  import { VueEditor } from 'vue2-quill-editor'
 
  export default {
    components: {
      VueEditor
    },
 
    data () {
      return {
        content: '<h3>Initial Content</h3>'
      }
    },
 
    methods: {
      handleSavingContent: function() {
        // You have the content to save
        console.log(this.content)
      }
    }  
  }
</script> 

Example

Use a Live Preview

<template>
  <div id="app">
    <vue-editor v-model="content"></vue-editor>
    <div v-html="content"></div>
  </div>
</template>
 
<script>
  import { VueEditor } from 'vue2-quill-editor'
 
  components: {
    VueEditor
  },
 
  export default {
    data() {
      return {
        content: '<h1>Initial Content</h1>'  
      }
    }
  }
</script> 

Folder structure

• src/: Source files for this component

  • Vue2Editor.vue The component itself

• example/: Example for demonstrating this component

  • index.js: Entry for the example
  • App.vue: The root component which we use to load this component

• vbuild.example.js: Config file for your example

• vbuild.component.js: Config file for your component

• package.json: App manifest

• .editorconfig: Ensure consistent editor behaivor

• .gitignore: Ignore files we don't need to push

Development

• yarn example: Run example in development mode
• yarn deploy: Deploy example to gh-pages
• yarn build:cjs: Build component in commonjs format
• yarn build:umd: Build component in umd format
• yarn build: Build component in both format
• yarn lint: Run eslint

Check out your npm scripts, it's using vbuild under the hood.

License

MIT