vqe

vue-quill-editor

🍡@quilljs editor component for @vuejs

Showing:

Popularity

Downloads/wk

41.5K

GitHub Stars

6.8K

Maintenance

Last Commit

2yrs ago

Contributors

15

Package

Dependencies

2

License

MIT

Type Definitions

Tree-Shakeable

Yes?

Reviews

Average Rating

4.3/53
Read All Reviews
eusebioluca

Top Feedback

1Highly Customizable

Readme

GitHub stars Build Status GitHub issues GitHub forks GitHub last commit license

NPM NPM

Vue-Quill-Editor

Quill editor component for Vue.

基于 Quill、适用于 Vue 的富文本编辑器,支持服务端渲染和单页应用。

Example

Install

NPM

npm install vue-quill-editor --save

# or
yarn add vue-quill-editor

CDN

<link rel="stylesheet" href="path/to/quill.core.css"/>
<link rel="stylesheet" href="path/to/quill.snow.css"/>
<link rel="stylesheet" href="path/to/quill.bubble.css"/>
<script type="text/javascript" src="path/to/quill.js"></script>
<script type="text/javascript" src="path/to/vue.min.js"></script>
<script type="text/javascript" src="path/to/dist/vue-quill-editor.js"></script>
<script type="text/javascript">
  Vue.use(window.VueQuillEditor)
</script>

Mount

Mount with global

import Vue from 'vue'
import VueQuillEditor from 'vue-quill-editor'

import 'quill/dist/quill.core.css' // import styles
import 'quill/dist/quill.snow.css' // for snow theme
import 'quill/dist/quill.bubble.css' // for bubble theme

Vue.use(VueQuillEditor, /* { default global options } */)

Mount with local component

import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

import { quillEditor } from 'vue-quill-editor'

export default {
  components: {
    quillEditor
  }
}

Mount with SSR

View Nuxt.js example code.

Register Quill module

import Quill from 'quill'
import yourQuillModule from '../yourModulePath/yourQuillModule.js'
Quill.register('modules/yourQuillModule', yourQuillModule)

// Vue app...

Component

<template>
  <!-- Two-way Data-Binding -->
  <quill-editor
    ref="myQuillEditor"
    v-model="content"
    :options="editorOption"
    @blur="onEditorBlur($event)"
    @focus="onEditorFocus($event)"
    @ready="onEditorReady($event)"
  />

  <!-- Or manually control the data synchronization -->
  <quill-editor
    :content="content"
    :options="editorOption"
    @change="onEditorChange($event)"
  />
</template>

<script>
  // You can also register Quill modules in the component
  import Quill from 'quill'
  import someModule from '../yourModulePath/someQuillModule.js'
  Quill.register('modules/someModule', someModule)
  
  export default {
    data () {
      return {
        content: '<h2>I am Example</h2>',
        editorOption: {
          // Some Quill options...
        }
      }
    },
    methods: {
      onEditorBlur(quill) {
        console.log('editor blur!', quill)
      },
      onEditorFocus(quill) {
        console.log('editor focus!', quill)
      },
      onEditorReady(quill) {
        console.log('editor ready!', quill)
      },
      onEditorChange({ quill, html, text }) {
        console.log('editor change!', quill, html, text)
        this.content = html
      }
    },
    computed: {
      editor() {
        return this.$refs.myQuillEditor.quill
      }
    },
    mounted() {
      console.log('this is current quill instance object', this.editor)
    }
  }
</script>

Projects using vue-quill-editor

Issues

Quill Modules

Quill

Quill API document

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable1
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
Eusebio Luca12 Ratings45 Reviews
November 24, 2020
Highly Customizable

Good text editor library, good configuration level. A bit strange the resulting formatting; i had some difficult to use table


0
节省钱ShenZhen11 Ratings0 Reviews
September 21, 2020
Daniel SixlNürnberg6 Ratings0 Reviews
September 21, 2020