quill的简单使用以及自定义插入图片的处理方法

quill这个富文本，它把图片转化为base64格式的字符串，然后编辑的内容可以用html代码的格式输出，如果这样的图片处理方式符合理想，那这个编辑器感觉简直完美。可惜我这边需要对图片进行大小检测以及从文本中分离存储。

• 安装引入，参考npm上的说明

我是在vue项目中使用的，根据官网先install

npm install vue-quill-editor --save

然后在组件中进行引入，这样之间使用quillEditor就能实现基本的功能了

// 引入样式
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代码如下，其中绑定的content就是编辑框内容的html代码

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

通过以上方式，发现虽然能够基本使用它的功能，但是我需要制定自己的图片处理方法，不得已采用另外的方式

PS：上面的使用方式不确定有没有自定义图片处理功能的方法，因为我找不到编辑框对象（下面将提到的quill）。如果能找到这个对象，应该是可以自定义的。

新的方式为，根据quill的中文文档，使用一个DOM作为编辑器的挂载点，自己调用初始化方法

<template>
<div>
    <div id="qu"></div>
</div>
</template>

<script>
//照样引入css文件
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";

//引入quill导出的初始化方法
import Quill from "quill";
</script>

通过以下代码手动初始化，至此完成了编辑器的安装引入

let quill = new Quill("#qu", config);    //quill就是编辑器对象，后续自定义操作都需要通过它

• 自定义工具栏以及汉化

quill本身提供了可以自定义工具栏的方法，通过传入config对象实现，相关配置如下。

editorOption: {
    theme: "snow",
    placeholder: "请在这里输入",
    modules: {
        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"] //上传图片、上传视频
        ]
    }
}

此外，工具栏的按钮文本默认是英文的，通过审查元素发现文本都是通过css来定义的，因此修改css样式即可将工具栏汉化，相关的CSS代码如下：

    .editor {
      line-height: normal !important;
      height: 800px;
    }
    .ql-snow .ql-tooltip[data-mode=link]::before {
      content: "请输入链接地址:";
    }
    .ql-snow .ql-tooltip.ql-editing a.ql-action::after {
        border-right: 0px;
        content: '保存';
        padding-right: 0px;
    }

    .ql-snow .ql-tooltip[data-mode=video]::before {
        content: "请输入视频地址:";
    }

    .ql-snow .ql-picker.ql-size .ql-picker-label::before,
    .ql-snow .ql-picker.ql-size .ql-picker-item::before {
      content: '14px';
    }
    .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]::before,
    .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
      content: '10px';
    }
    .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]::before,
    .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
      content: '18px';
    }
    .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]::before,
    .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {
      content: '32px';
    }

    .ql-snow .ql-picker.ql-header .ql-picker-label::before,
    .ql-snow .ql-picker.ql-header .ql-picker-item::before {
      content: '文本';
    }
    .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
    .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
      content: '标题1';
    }
    .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
    .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
      content: '标题2';
    }
    .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
    .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
      content: '标题3';
    }
    .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
    .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
      content: '标题4';
    }
    .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
    .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
      content: '标题5';
    }
    .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
    .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
      content: '标题6';
    }

    .ql-snow .ql-picker.ql-font .ql-picker-label::before,
    .ql-snow .ql-picker.ql-font .ql-picker-item::before {
      content: '标准字体';
    }
    .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]::before,
    .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {
      content: '衬线字体';
    }
    .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]::before,
    .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {
      content: '等宽字体';
    }
    .ql-align-center{
      text-align: center;
    }
    .ql-align-right{
      text-align: right;
    }
    .ql-align-left{
      text-align: left;
    }

以上css代码来自于https://blog.csdn.net/qq_42817227/article/details/88524528

• 自定义图片修改

更改使用的方法就是为了拿到编辑器对象quill。查阅了网上大家的方法，发现主要思路就是修改quill本身的点击图片按钮时的回调函数，在新的回调函数里面做自己想要的操作。相关代码如下：

<template>
    <div>
        <div id="qu"></div>
        <!-- 借助自己写的input读取图片 -->
        <input
            id="file"
            type="file"
            accept="image/png, image/gif, image/jpeg, image/bmp, image/x-icon"
            @change="onFileChange"
        />
    </div>
</template>

<script>
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";


import Quill from "quill";

export default {
    data() {
        return {
            quill: null,
            content: null,
            editorOption: {
                theme: "snow",
                placeholder: "请在这里输入",
                modules: {
                    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"] //上传图片、上传视频
                    ]
                }
            }
        };
    },
    mounted() {
        this.init();
    },
    methods: {
        init() {
            this.quill = new Quill("#qu", this.editorOption);    //初始化编辑器
            let toolbar = this.quill.getModule("toolbar");       //获取工具栏模块

            //对工具栏的image添加回调函数覆盖原本的方法
            toolbar.addHandler("image", () => {
                document.getElementById("file").click();
            });
        },

        onFileChange(event) {
            //通过input本身的change钩子，对图片进行处理
            let tar = event.target;
            let files = tar.files;
            if (files[0].size > 1024 * 1024 * 2) {
                this.$message.error("图片大小不能超过2M");
                return false;
            }

            //使用FileReader读取图片成base64编码，再插入到编辑框中
            let reader = new FileReader();
            reader.onload = e => {
                let url = e.target.result;

                //将图片插入需要获取当前光标的位置，参数为是否要求焦点在编辑器上
                let selection = this.quill.getSelection(true);
                //调用insertEmbed 将图片插入到编辑器
                this.quill.insertEmbed(selection.index, "image", url);
            };
            reader.readAsDataURL(files[0]);
        }
    }
};
</script>

<style lang="scss" scoped>
@import "../../../assets/css/quillCn.css";
#file {
    display: none;
}
</style>

到这里完成了对图片处理方式的修改。