vue2使用vue-quill-editor

2019独角兽企业重金招聘Python工程师标准>>>

一、npm install vue-quill-editor
        npm install quill
二、index.js引入
        import VueQuillEditor from 'vue-quill-editor'
        Vue.use(VueQuillEditor)
三、components文件夹新建xx.vue
        写法<template>
  <!-- Or manually control the data synchronization（或手动控制数据流） -->
  <div class="editor">
    <quill-editor v-model="content"
                  ref="myQuillEditor"
                  :options="editorOption"
                  @blur="onEditorBlur($event)"
                  @focus="onEditorFocus($event)"
                  @ready="onEditorReady($event)">
    </quill-editor>
    <button @click="getContent()">获取内容</button>
  </div>
</template>
<script>
  import Quill from 'quill'
  import { ImageImport } from '../../static/quill/ImageImport.js'
  import { ImageResize } from '../../static/quill/ImageResize.js'
  Quill.register('modules/imageImport', ImageImport)
  Quill.register('modules/imageResize', ImageResize)
  // You can also register quill modules in the component
  export default {
    data () {
      return {
        content: '<h2>I am Example</h2>',
        editorOption: {
          modules: {
            history: {
              delay: 1000,
              maxStack: 50,
              userOnly: false
            },
            imageImport: true,
            imageResize: {
              displaySize: true
            }
          }
        }
      }
    },
    // if you need to manually control the data synchronization, parent component needs to explicitly emit an event instead of relying on implicit binding
    // 如果需要手动控制数据同步，父组件需要显式地处理changed事件
    methods: {
      onEditorBlur (editor) {
        console.log('editor blur!', editor)
      },
      onEditorFocus (editor) {
        console.log('editor focus!', editor)
      },
      onEditorReady (editor) {
        console.log('editor ready!', editor)
      },
      onEditorChange ({ editor, html, text }) {
        console.log('editor change!', editor, html, text)
        this.content = html
      },
      getContent () {
        alert(this.content)
      }
    },
    mounted () {
      // you can use current editor object to do something(quill methods)
      console.log('this is current quill instance object', this.editor)
    }
  }
</script>
其中imageImport和imageResize 需要从github(vue-quill-editor)中的modules 中下载下来
效果

转载于:https://my.oschina.net/u/2439541/blog/1511213