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代码
通过以上方式，发现虽然能够基本使用它的功能，但是我需要制定自己的图片处理方法，不得已采用另外的方式
PS：上面的使用方式不确定有没有自定义图片处理功能的方法，因为我找不到编辑框对象（下面将提到的quill）。如果能找到这个对象，应该是可以自定义的。
新的方式为，根据quill的中文文档，使用一个DOM作为编辑器的挂载点，自己调用初始化方法
通过以下代码手动初始化，至此完成了编辑器的安装引入
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本身的点击图片按钮时的回调函数，在新的回调函数里面做自己想要的操作。相关代码如下：
到这里完成了对图片处理方式的修改。
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！