Nuanced Pterodactyl Monk

    quill-vuejs

    0.0.14 • Public • Published

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

    NPM NPM

    quill-vuejs

    Quill editor component for Vue.

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

    Preview

    Example

    Install

    NPM

    npm install quill-vuejs --save
    
    # or
    yarn add quill-vuejs

    CDN

     <div id="app">
            <quill-editor  
            ref="quillEditor"
            class="editor"
            v-model="content"
            :options="editorOption"
            @blur="onEditorBlur($event)"
            @focus="onEditorFocus($event)"
            @ready="onEditorReady($event)"
            />
        </div>
        <!-- Include the Quill library -->
        <script src="https://cdn.quilljs.com/1.3.4/quill.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
        <!-- Quill JS Vue -->
        <script src="https://cdn.jsdelivr.net/npm/quill-vuejs@0.0.4/dist/quill-vuejs.js"></script>
        <!-- Include stylesheet -->
        <link href="https://cdn.quilljs.com/1.3.4/quill.core.css" rel="stylesheet">
        <link href="https://cdn.quilljs.com/1.3.4/quill.snow.css" rel="stylesheet">
        <link href="https://cdn.quilljs.com/1.3.4/quill.bubble.css" rel="stylesheet">
        <script type="text/javascript">
            Vue.use(window.VueQuillEditor);
            var app = new Vue({
                el: '#app',
                data: {
                    content: '<h2>I\'m quill vuejs example</h2>',
                    editorOption: {
                        theme: 'snow'
                    }
                },
                methods: {
                    onEditorBlur(quill) {
                        console.log('editor blur!', quill)
                    },
                    onEditorFocus(quill) {
                        console.log('editor focus!', quill)
                    },
                    onEditorReady(quill) {
                        console.log('editor ready!', quill)
                    }
                },
                computed: {
                    editor() {
                        return this.$refs.quillEditor.quill
                    }
                },
                mounted() {
                   console.log('this is quill instance object', this.editor)
                }
            });
        </script>

    Mount

    Mount with global

    import Vue from 'vue'
    import VueQuillEditor from 'quill-vuejs'
    
    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 'quill-vuejs'
    
    export default {
      components: {
        quillEditor
      }
    }

    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 quill-vuejs

    Issues

    Quill Modules

    Quill

    Quill API document

    Install

    npm i quill-vuejs

    DownloadsWeekly Downloads

    18

    Version

    0.0.14

    License

    MIT

    Unpacked Size

    22.4 kB

    Total Files

    6

    Last publish

    Collaborators

    • terrychinaz