Vue注意事项之|如何使用和配置vue-quill-editor

Vue注意事项之|如何使用和配置vue-quill-editor

最近开始过渡vuecli3，感觉cli3确实比cli2简化了许多配置，取消了webpack.config.js的配置，改为自定义的vue.config.js，几乎可以0配置就可以开始工作，具体关于cli3的配置可见官网这里。
正好有个vue的项目需要做，需要用富文本编辑器，看到有vue组件做的编辑器 vue-quill-editor ，挺简洁的样子，开撸。

首先要安装，npm install vue-quill-editor --save
然后可以直接将下面代码复制进组件中，再在其他组件里引入该组件直接使用

<template>
  <!-- bidirectional data binding（双向数据绑定） -->
  <quill-editor v-model="content"
                ref="myQuillEditor"
                :options="editorOption"
                @blur="onEditorBlur($event)"
                @focus="onEditorFocus($event)"
                @ready="onEditorReady($event)">
  </quill-editor>

</template>

<script>
  // require styles
  import 'quill/dist/quill.core.css'
  import 'quill/dist/quill.snow.css'
  import 'quill/dist/quill.bubble.css'
  // you can also register quill modules in the component
  //import Quill from 'quill'
  // import { someModule } from '../yourModulePath/someQuillModule.js'
  // Quill.register('modules/someModule', someModule)

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

  // 工具栏配置
    const toolbarOptions = [
      ['bold'],
      ['image']                                     
    ]

  export default {
    components:{
      quillEditor
    },
    data () {
      return {
        content: '<h2>I am Example</h2>',
        editorOption: {                
                    modules: {
                        toolbar: {
                            container: toolbarOptions,  // 工具栏
                        }
                    }
                }
      }
    },
    // manually control the data synchronization
    // 如果需要手动控制数据同步，父组件需要显式地处理changed事件
    methods: {
      onEditorBlur(quill) {
        console.log('editor blur!', quill)
        console.log(quill.container.firstChild.innerHTML)//获得html格式文本,岂不美哉
      },
      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>

我们可以从上面代码里看到下面这部分，这是配置工具栏，根据自己需要自行删减

// 工具栏配置
const toolbarOptions = [
  ['bold'],
  ['image']                                     
]

然后我们可以看到另一部分，事件方法名不重要，重要的是：quill.container.firstChild.innerHTML
获得html代码格式的文本

onEditorBlur(quill) {
    console.log('editor blur!', quill)
    console.log(quill.container.firstChild.innerHTML)//获得html格式文本,岂不美哉
}	

图片是base64格式的，总体是很轻便
最后附上效果图