quill富文本默认样式如下图 需求提出：缺少文本行高配置项

quill组件新增部分代码如下

这里只写新增的部分;组件自带功能省略/文末会有整体组件代码。

toolbar: [//.... 其他工具栏配置项[{ lineheight: ["", "1", "1-5", "1-75", "2", "3", "4", "5"] }],//行高],

 const editor = this.$refs.editor;this.Quill = new Quill(editor, this.options);//上面一般是你组件自带的代码//在这个位置添加下面代码const Parchment = Quill.import("parchment");class lineHeightAttributor extends Parchment.Attributor.Class {}const lineHeightStyle = new lineHeightAttributor("lineheight","ql-lineheight",{scope: Parchment.Scope.INLINE,whitelist: ["", "1", "1-5", "1-75", "2", "3", "4", "5"],});Quill.register({ "formats/lineHeight": lineHeightStyle }, true);

css样式新加如下代码

.ql-snow .ql-picker.ql-lineheight .ql-picker-label::before,
.ql-snow .ql-picker.ql-lineheight .ql-picker-item::before {content: "行高";
}
.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value="1"]::before,
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value="1"]::before {content: "1";
}
.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value="1-5"]::before,
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value="1-5"]::before {content: "1.5";
}
.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value="1-75"]::before,
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value="1-75"]::before {content: "1.75";
}
.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value="2"]::before,
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value="2"]::before {content: "2";
}
.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value="3"]::before,
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value="3"]::before {content: "3";
}
.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value="4"]::before,
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value="4"]::before {content: "4";
}
.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value="5"]::before,
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value="5"]::before {content: "5";
}
.ql-snow .ql-picker.ql-lineheight {width: 70px;
}
.ql-snow .ql-editor .ql-lineheight-1 {line-height: 1;
}
.ql-snow .ql-editor .ql-lineheight-1-5 {line-height: 1.5;
}
.ql-snow .ql-editor .ql-lineheight-1-75 {line-height: 1.75;
}
.ql-snow .ql-editor .ql-lineheight-2 {line-height: 2;
}
.ql-snow .ql-editor .ql-lineheight-3 {line-height: 3;
}
.ql-snow .ql-editor .ql-lineheight-4 {line-height: 4;
}
.ql-snow .ql-editor .ql-lineheight-5 {line-height: 5;
}

最后效果展示

全部代码如下:

<template><div><el-upload:action="uploadUrl":data="{ fileSource: 1 }":before-upload="handleBeforeUpload":on-success="handleUploadSuccess":on-error="handleUploadError"name="file":show-file-list="false":headers="headers"style="display: none"ref="upload"v-if="this.type == 'url'"></el-upload><div class="editor" ref="editor" :style="styles"></div></div>
</template><script>
import Quill from "quill";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
// import { getToken } from '@/utils/auth' //如果你的接口需要token的话打开这行export default {name: "Editor",props: {value: {type: String,default: "",},height: {type: Number,default: null,},minHeight: {type: Number,default: null,},readOnly: {type: Boolean,default: false,},fileSize: {type: Number,default: 5,},type: {type: String,default: "url",},},data() {return {uploadUrl: "", // 你的项目里 上传图片的服务器地址showImgService: "", // 你的项目里 上传的图片回显地址headers: {// Authorization: "Bearer " + getToken(),//如果你的接口需要token的话打开这行// 'X-Access-Token': getToken(),//如果你的接口需要token的话打开这行},Quill: null,currentValue: "",options: {theme: "snow",bounds: document.body,debug: "warn",modules: {// 工具栏配置toolbar: [["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线["blockquote", "code-block"], // 引用  代码块[{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表[{ indent: "-1" }, { indent: "+1" }], // 缩进[{ size: ["small", false, "large", "huge"] }], // 字体大小[{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题[{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色[{ align: [] }], // 对齐方式["clean"], // 清除文本格式["link", "image"], // 链接、图片[{ lineheight: ["", "1", "1-5", "1-75", "2", "3", "4", "5"] }], //行高],},placeholder: "请输入内容",readOnly: this.readOnly,},};},computed: {styles() {let style = {};if (this.minHeight) {style.minHeight = `${this.minHeight}px`;}if (this.height) {style.height = `${this.height}px`;}return style;},},watch: {value: {handler(val) {if (val !== this.currentValue) {this.currentValue = val === null ? "" : val;if (this.Quill) {this.Quill.pasteHTML(this.currentValue);}}},immediate: true,},},mounted() {this.init();},beforeDestroy() {this.Quill = null;},methods: {init() {const editor = this.$refs.editor;this.Quill = new Quill(editor, this.options);const Parchment = Quill.import("parchment");class lineHeightAttributor extends Parchment.Attributor.Class {}const lineHeightStyle = new lineHeightAttributor("lineheight","ql-lineheight",{scope: Parchment.Scope.INLINE,whitelist: ["", "1", "1-5", "1-75", "2", "3", "4", "5"],});Quill.register({ "formats/lineHeight": lineHeightStyle }, true);// 如果设置了上传地址则自定义图片上传事件if (this.type == "url") {let toolbar = this.Quill.getModule("toolbar");toolbar.addHandler("image", (value) => {this.uploadType = "image";if (value) {this.$refs.upload.$children[0].$refs.input.click();} else {this.quill.format("image", false);}});}this.Quill.pasteHTML(this.currentValue);this.Quill.on("text-change", (delta, oldDelta, source) => {const html = this.$refs.editor.children[0].innerHTML;const text = this.Quill.getText();const quill = this.Quill;this.currentValue = html;this.$emit("input", html);this.$emit("on-change", { html, text, quill });});this.Quill.on("text-change", (delta, oldDelta, source) => {this.$emit("on-text-change", delta, oldDelta, source);});this.Quill.on("selection-change", (range, oldRange, source) => {this.$emit("on-selection-change", range, oldRange, source);});this.Quill.on("editor-change", (eventName, ...args) => {this.$emit("on-editor-change", eventName, ...args);});},// 上传前校检格式和大小handleBeforeUpload(file) {if (this.fileSize) {const isLt = file.size / 1024 / 1024 < this.fileSize;if (!isLt) {this.$message.error(`上传文件大小不能超过${this.fileSize}MB!`);return false;}}return true;},handleUploadSuccess(res, file) {console.log(res);let quill = this.Quill;if (res.code == 200) {let length = quill.getSelection().index;quill.insertEmbed(length,"image",this.showImgService + res.result.urlPath);quill.setSelection(length + 1);} else {this.$message.error("图片插入失败");}},handleUploadError() {this.$message.error("图片插入失败");},},
};
</script><style>
.editor,
.ql-toolbar {white-space: pre-wrap !important;line-height: normal !important;
}
.quill-img {display: none;
}
.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-snow .ql-picker.ql-lineheight .ql-picker-label::before,
.ql-snow .ql-picker.ql-lineheight .ql-picker-item::before {content: "行高";
}.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value="1"]::before,
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value="1"]::before {content: "1";
}.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value="1-5"]::before,
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value="1-5"]::before {content: "1.5";
}.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value="1-75"]::before,
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value="1-75"]::before {content: "1.75";
}.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value="2"]::before,
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value="2"]::before {content: "2";
}.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value="3"]::before,
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value="3"]::before {content: "3";
}.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value="4"]::before,
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value="4"]::before {content: "4";
}.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value="5"]::before,
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value="5"]::before {content: "5";
}.ql-snow .ql-picker.ql-lineheight {width: 70px;
}.ql-snow .ql-editor .ql-lineheight-1 {line-height: 1;
}.ql-snow .ql-editor .ql-lineheight-1-5 {line-height: 1.5;
}.ql-snow .ql-editor .ql-lineheight-1-75 {line-height: 1.75;
}.ql-snow .ql-editor .ql-lineheight-2 {line-height: 2;
}.ql-snow .ql-editor .ql-lineheight-3 {line-height: 3;
}.ql-snow .ql-editor .ql-lineheight-4 {line-height: 4;
}.ql-snow .ql-editor .ql-lineheight-5 {line-height: 5;
}
</style>

总结

提示：以上方法仅供参考;如有不正望指出;与君共勉。

quill富文本工具栏添加行高配置相关推荐

Vue项目中tinymce富文本的安装以及配置
Vue项目中tinymce富文本的安装以及配置对于目前网上存在的许多富文本插件中,个人还是觉得tinymce相对比较强大一些.在使用配置的过程中,可能会出现配置不完全,导致使用不了的情况,下面把我个 ...
quill 富文本编辑器
富文本quill 富文本框中上传图片的缩放功能 vue.config.js添加如下配置 import "./resizeImg.js"➡ resizeImg.js下载链接 3.以下 ...
.net下的富文本编辑器FCKeditor的配置方法（图）原创
.net下的富文本编辑器FCKeditor的配置方法(图)原创 FCKeditor是一款开源的富文本编辑器,几乎支持所有流行的Web开发语言,版本稳定,用户多,可配置性好. 以前做Java和php的时 ...
quill 富文本编辑器自定义格式化
quilljs 现在富文本编辑器轮子太多了,Github 上随便搜一下就有一堆,我需要实现的功能很简单,所以就佛系地选了 quilljs,quilljs 是一个轻量级的富文本编辑器. 链接: 官网:q ...
百度富文本编辑器UEditor安装配置全过程
网站开发时富文本编辑器是必不可少的,他可以让用户自行编辑内容的样式然后上传到后台!下面我们来介绍如何安装使用百度富文本编辑器一.下载并且设置百度富文本编辑器的样式你可以去百度UEditor ...
Quill 富文本编辑器二次封装
Quill 富文本编辑器二次封装 Quill 是一个很流行的富文本编辑器,github 上 star 大约 21k.但是很少项目中使用时直接使用它,都要对其进行二次封装,你作为一个页面仔是挡不住有想法 ...
quill富文本编辑器——修改默认图片、视频上传功能
quill富文本编辑器默认的图片上传是将图片地址转换为base64格式,可能会导致字段过长:默认的视频上传是插入iframe标签,与需要的video标签不符合图片上传初始化编辑器时重写image上 ...
Quill富文本的使用以及自定义图片和视频处理事件
Quill富文本的使用官网 https://quilljs.com/docs/quickstart/ 1.安装quill 使用 mpn i quill -S 2.新建myquil.vue文件, ...
vue quill富文本编辑器上传图片遇到的坑
在使用quill富文本编辑器上传图片的时候,很多地方都是成功的,但是唯有一处,上传图片总是失败,由此后端的朋友就说可以html标签转换成JSON字符串上传上去,展示的时候在转换回来,即可解决问题. 由 ...

quill富文本工具栏添加行高配置

quill组件新增部分代码如下

最后效果展示

总结

quill富文本工具栏添加行高配置相关推荐

最新文章

热门文章