vue---富文本编辑器vue-quill-editor使用详解

​

 安装

npm install vue-quill-editor --save

引入

全局引入

main.js中引入并使用

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 } */)

组件中引入

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

使用

基本使用

富文本示例

代码实现:

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

  <!-- （或手动控制数据流） -->
  <quill-editor :content="content"
                :options="editorOption"
                @change="onEditorChange($event)">
  </quill-editor>
</template>

<script>
  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
        }
      }
    },
    // 如果需要手动控制数据同步，父组件需要显式地处理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>

自定义工具栏

实际开发中,可能不需要那么多配置项,所以我们可以通过配置项来选择展示一部分需要的工具

工具栏完整配置:

        toolbar: [
             ['bold', 'italic', 'underline', 'strike'], //加粗，斜体，下划线，删除线
             ['blockquote', 'code-block'], //引用，代码块
             [{'header': 1}, {'header': 2}], // 标题，键值对的形式；1、2表示字体大小
             [{'list': 'ordered'}, {'list': 'bullet'}], //列表
             [{'script': 'sub'}, {'script': 'super'}], // 上下标
             [{'indent': '-1'}, {'indent': '+1'}], // 缩进
             [{'direction': 'rtl'}], // 文本方向
             [{'size': ['small', false, 'large', 'huge']}], // 字体大小
             [{'header': [1, 2, 3, 4, 5, 6, false]}], //几级标题
             [{'color': []}, {'background': []}], // 字体颜色，字体背景颜色
             [{'font': []}], //字体
             [{'align': []}], //对齐方式
             ['clean'], //清除字体样式
             ['image', 'video'] //上传图片、上传视频
            ]
         },

自定义示例:

​编辑主要代码实现:

<template>
<quill-editor v-model="detailDesc" ref="myQuillEditor" :options="editorOption"></quill-editor>
</template>
<script>
export default {
    data(){
        return {
            editorOption: {},
            detailDesc:''
        }
    },
    created() {
        let toolbarOptions = [['bold', 'italic', 'underline', 'strike'],[{ 'list': 'ordered' }], [{ script: 'sub' }, { script: 'super' }],[{ 'indent': '-1'}, { 'indent': '+1' }],[{ header: [1, 2, 3, 4, 5, 6, false] }],['background'],['color'],[{ 'font': [] }],[{ 'align': [] }],['image'],['video'], ];
    this.editorOption = {
      modules: {
        toolbar: {
          container: toolbarOptions,
        }
      }
    };
    }
}
</script>

图片上传

正常插入图片到富文本编辑器里面,图片资源会转换成base64编码,数据长度过长,直接将图片资源传到服务器返回图片在线地址

主要代码实现:

<template>
<quill-editor v-model="detailDesc" ref="myQuillEditor" :options="editorOption"></quill-editor>
</template>
<script>
import { quillEditor, Quill } from "vue-quill-editor";
import { container, ImageExtend, QuillWatch } from "quill-image-extend-module";
Quill.register("modules/ImageExtend", ImageExtend); //注册扩展模块
export default {
    data(){
        return {
            editorOption: {},
            detailDesc:''
        }
    },
    created() {
        let toolbarOptions = [['bold', 'italic', 'underline', 'strike'],[{ 'list': 'ordered' }], [{ script: 'sub' }, { script: 'super' }],[{ 'indent': '-1'}, { 'indent': '+1' }],[{ header: [1, 2, 3, 4, 5, 6, false] }],['background'],['color'],[{ 'font': [] }],[{ 'align': [] }],['image'],['video'], ];
    this.editorOption = {
      modules: {
        ImageExtend: {
          loading: true,
          name: "file",
          action: this.uploadUrl,
          headers: xhr => {
            xhr.setRequestHeader("token", this.token);
          }, // 可选参数 设置请求头部
          response: res => {
            return res.data.httpPath;
          }
        },
        toolbar: {
          container: toolbarOptions,
          handlers: {
            image: function() {
              QuillWatch.emit(this.quill.id);
            }
          }
        }
      }
    };
    }
}
</script>

​