vue-quill-editor

    3.0.6 • Public • Published

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

    NPM NPM

    Vue-Quill-Editor

    🍡Quill editor component for Vue, support SPA and SSR.

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

    Example

    Demo Page

    CDN Example

    Nuxt.js/SSR example code

    Projects Using Vue-Quill-Editor

    Tamiat CMS

    Install

    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> 

    NPM

    npm install vue-quill-editor --save

    Mount

    mount with global

    import Vue from 'vue'
    import VueQuillEditor from 'vue-quill-editor'
     
    // require styles
    import 'quill/dist/quill.core.css'
    import 'quill/dist/quill.snow.css'
    import 'quill/dist/quill.bubble.css'
     
    Vue.use(VueQuillEditor, /* { default global options } */)

    mount with component

    // require styles
    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

    // if used in nuxt.js/ssr, you should keep require it only in browser build environment
    if (process.browser) {
      const VueQuillEditor = require('vue-quill-editor/dist/ssr')
      Vue.use(VueQuillEditor, /* { default global options } */)
    }

    register quill module

    // register quill modules, you need to introduce and register before the vue program is instantiated
    import Quill from 'quill'
    import yourQuillModule from '../yourModulePath/yourQuillModule.js'
    Quill.register('modules/yourQuillModule', yourQuillModule)

    Difference(使用方法的区别)

    SSR and the only difference in the use of the SPA:

    • SPA worked by the component, find quill instance by ref attribute.
    • SSR worked by the directive, find quill instance by directive arg.
    • Other configurations, events are the same.

    SSR

    <!-- You can custom the "myQuillEditor" name used to find the quill instance in current component -->
    <template>
      <!-- bidirectional data binding(双向数据绑定) -->
      <div class="quill-editor" 
           v-model="content"
           v-quill:myQuillEditor="editorOption">
      </div>
     
      <!-- Or manually control the data synchronization(手动控制数据流)  -->
      <div class="quill-editor" 
           :content="content"
           @change="onEditorChange($event)"
           v-quill:myQuillEditor="editorOption">
      </div>
    </template>
     
    <script>
      export default {
        data() {
          return {
            content: '<p>example content</p>',
            editorOption: { /* quill options */ }
          }
        },
        mounted() {
          console.log('this is current quill instance object', this.myQuillEditor)
        },
        methods: {
          onEditorChange(event) {
            console.log('onEditorChange')
          }
        },
        // Omit the same parts as in the following component sample code
        // ...
      }
    </script>

    SPA

    <template>
      <!-- bidirectional data binding(双向数据绑定) -->
      <quill-editor v-model="content"
                    ref="myQuillEditor"
                    :options="editorOption"
                    @blur="onEditorBlur($event)"
                    @focus="onEditorFocus($event)"
                    @ready="onEditorReady($event)">
      </quill-editor>
     
      <!-- Or manually control the data synchronization(或手动控制数据流) -->
      <quill-editor :content="content"
                    :options="editorOption"
                    @change="onEditorChange($event)">
      </quill-editor>
    </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
            }
          }
        },
        // manually control the data synchronization
        // 如果需要手动控制数据同步,父组件需要显式地处理changed事件
        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>

    Modules

    Issues

    Quill documents

    Api docs

    Author

    Surmon

    Install

    npm i vue-quill-editor

    DownloadsWeekly Downloads

    49,173

    Version

    3.0.6

    License

    MIT

    Unpacked Size

    41.5 kB

    Total Files

    11

    Last publish

    Collaborators

    • surmon