加入CODE CHINA

· 不限速    · 不限空间    · 不限人数    · 私仓免费

免费加入
    README.md

    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

    项目简介

    🚀 Github 镜像仓库 🚀

    源项目地址

    https://github.com/surmon-china/vue-quill-editor

    发行版本

    当前项目没有发行版本

    贡献者 16

    全部贡献者

    开发语言

    • JavaScript 90.7 %
    • Vue 9.3 %