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