Vue-Quill-Editor一个vue的富文本编辑器的使用

最近需要做内容的编辑和上传，所以需要用到富文本编辑器。刚开始引用的百度的富文本，发现虽然功能比较多，但是还得跟后台配合，而且样式什么的也比较麻烦，所以还是用了vue-quill-editor这个编辑器，比较简单。

1 安装

npm install vue-quill-editor --save

2 引入

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
  }
}

3 使用

<quill-editor 
    v-model="content"
    ref="myQuillEditor"
    :options="quillOption"
    @blur="onEditorBlur($event)"
    @focus="onEditorFocus($event)"
    @ready="onEditorReady($event)">
  </quill-editor>

<script>
const toolOptions = [
    ['bold', 'italic', 'underline', 'strike'], 
    ['blockquote', 'code-block'], 
    [{'header': 1}, {'header': 2}], 
    [{'list': 'ordered'}, {'list': 'bullet'}],  
    [{'script': 'sub'}, {'script': 'super'}],  
    [{'clean':'源码编辑'}], 
    ['link', 'image', 'video'], 
    ['sourceEditor']     //新添加的工具 
]; 
export default {
    data () {
      return {
        content: '<h2>I am Example</h2>',
        editorOption: {
            placeholder: "请在这里输入",
                modules:{
                    toolbar: {
                        container: toolOptions,  // 工具栏选项
                        handlers: {  // 事件重写
                           image:value=>{
                               if (value) {
                                    _this.centerDialogVisible=true;
                                } else {}
                           }
                        } 
                    }
            }
        }
      }
    },
    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
      }
    }
  }
</script>

这里的toolOptions是把编辑器的样式按照需要的重新引入了一下。又用了一个事件重写的事件，还是比较全的。