vue-quill-editor自定义字体大小和字体样式

不用修改下载的源文件，直接在editorquill.vue文件中修改即可

重点部分如下

[{ size: ['10px', '12px', false, '16px', '18px', '20px', '30px', '32px'] }], // 字体大小
[{ font: [false, 'SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong', 'Arial', 'sans-serif'] }], // 字体种类
import { Quill,quillEditor } from "vue-quill-editor"; 正常没有引入红色，需额外引入红色并添加 4
// 自定义字体大小

let Size = Quill.import('attributors/style/size')

Size.whitelist = ['10px', '12px', '16px', '18px', '20px', '30px', '32px']

Quill.register(Size, true)

// 自定义字体类型

var fonts = ['SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong', 'Arial', 'sans-serif']

var Font = Quill.import('formats/font')

Font.whitelist = fonts

Quill.register(Font, true)
整个style复制替换你自己的

ps:如有新增的样式或px可依葫芦画瓢依次增加

全部代码

<template><div style="height:300px;margin-bottom: 25px;"><!-- 图片上传组件辅助--><el-uploadclass="avatar-uploader":action="serverUrl":show-file-list="false":on-success="uploadSuccess":on-error="uploadError":before-upload="beforeUpload"></el-upload><quill-editor class="editor"v-model="content"ref="myQuillEditor" :options="editorOption" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"@change="onEditorChange($event)"></quill-editor></div>
</template>
<script>
// 工具栏配置
const toolbarOptions = [["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: ['10px', '12px', false, '16px', '18px', '20px', '30px', '32px'] }], // 字体大小[{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题[{ color: [] },{ background: [] } ], // 字体颜色、字体背景颜色[{ font: [false, 'SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong', 'Arial', 'sans-serif'] }], // 字体种类[{ align: [] }], // 对齐方式["clean"], // 清除文本格式["image", ] // 链接、图片、视频
];import { Quill,quillEditor } from "vue-quill-editor";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
// 自定义字体大小let Size = Quill.import('attributors/style/size')Size.whitelist = ['10px', '12px', '16px', '18px', '20px', '30px', '32px']Quill.register(Size, true)// 自定义字体类型var fonts = ['SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong', 'Arial', 'sans-serif']var Font = Quill.import('formats/font')Font.whitelist = fontsQuill.register(Font, true)export default {props: {/*编辑器的内容*/value: {type: String},/*图片大小*/maxSize: {type: Number,default: 4000 //kb}},components: {quillEditor},data() {return {content: this.value,quillUpdateImg: false, // 根据图片上传状态来确定是否显示loading动画，刚开始是false,不显示editorOption: {placeholder: "",theme: "snow", // or 'bubble'placeholder: "...",modules: {toolbar: {container: toolbarOptions,// container: "#toolbar",handlers: {image: function(value) {if (value) {console.log(value)// 触发input框选择图片文件document.querySelector(".avatar-uploader input").click();} else {this.quill.format("image", false);}},// link: function(value) {//   if (value) {//     var href = prompt('请输入url');//     this.quill.format("link", href);//   } else {//     this.quill.format("link", false);//   }// },}}}},serverUrl:window.axios.defaults.baseURL +  'admin/upload', // 这里写你要上传的图片服务器地址header: {// token: sessionStorage.token} // 有的图片服务器要求请求头需要有token};},methods: {onEditorBlur() {//失去焦点事件},onEditorFocus() {//获得焦点事件},onEditorChange() {//内容改变事件this.$emit("input", this.content);},// 富文本图片上传前beforeUpload() {// 显示loading动画this.quillUpdateImg = true;},uploadSuccess(res, file) {// res为图片服务器返回的数据// 获取富文本组件实例console.log(res)let quill = this.$refs.myQuillEditor.quill;// 如果上传成功if (res.code == 200) {// 获取光标所在位置let length = quill.getSelection().index;// 插入图片  res.url为服务器返回的图片地址quill.insertEmbed(length, "image", res.data[0].path);// 调整光标到最后quill.setSelection(length + 1);} else {this.$message.error("图片插入失败");}// loading动画消失this.quillUpdateImg = false;},// 富文本图片上传失败uploadError() {// loading动画消失this.quillUpdateImg = false;this.$message.error("图片插入失败");}}
};
</script> <style>
.editor {line-height: normal !important;height: 300px;
}
.SizeTiShi{font-size: 12px;color: #999999;text-align: right;/* margin-right: 20px; */margin-top: 60px;
}
.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' !important;font-size: 14px;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='10px']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='10px']::before {content: '10px' !important;font-size: 10px;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='12px']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='12px']::before {content: '12px' !important;font-size: 12px;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='16px']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='16px']::before {content: '16px' !important;font-size: 16px;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='18px']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='18px']::before {content: '18px' !important;font-size: 18px;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='20px']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='20px']::before {content: '20px' !important;font-size: 20px;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='30px']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='30px']::before {content: '30px' !important;font-size: 30px;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='32px']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='32px']::before {content: '32px' !important;font-size: 32px;
}.ql-snow .ql-picker.ql-header .ql-picker-label::before,
.ql-snow .ql-picker.ql-header .ql-picker-item::before {content: '文本' !important;
}
.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' !important;
}
.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' !important;
}
.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' !important;
}
.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' !important;
}
.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' !important;
}
.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' !important;
}.ql-snow .ql-picker.ql-font .ql-picker-label::before,
.ql-snow .ql-picker.ql-font .ql-picker-item::before {content: '标准字体' !important;
}
.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: '衬线字体' !important;
}
.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: '等宽字体' !important;
}.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=SimSun]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=SimSun]::before {content: "宋体" !important;font-family: "SimSun";
}.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=SimHei]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=SimHei]::before {content: "黑体" !important;font-family: "SimHei";
}.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Microsoft-YaHei]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Microsoft-YaHei]::before {content: "微软雅黑" !important;font-family: "Microsoft YaHei";
}.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=KaiTi]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=KaiTi]::before {content: "楷体" !important;font-family: "KaiTi";
}.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=FangSong]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=FangSong]::before {content: "仿宋" !important;font-family: "FangSong";
}.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Arial]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Arial]::before {content: "Arial" !important;font-family: "Arial";
}.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Times-New-Roman]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Times-New-Roman]::before {content: "Times New Roman" !important;font-family: "Times New Roman";
}.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=sans-serif]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=sans-serif]::before {content: "sans-serif" !important;font-family: "sans-serif";
}.ql-font-SimSun {font-family: "SimSun";
}.ql-font-SimHei {font-family: "SimHei";
}.ql-font-Microsoft-YaHei {font-family: "Microsoft YaHei";
}.ql-font-KaiTi {font-family: "KaiTi";
}.ql-font-FangSong {font-family: "FangSong";
}.ql-font-Arial {font-family: "Arial";
}.ql-font-Times-New-Roman {font-family: "Times New Roman";
}.ql-font-sans-serif {font-family: "sans-serif";
}
</style>

vue-quill-editor自定义字体大小和字体样式相关推荐

Python使用matplotlib函数subplot可视化多个不同颜色的折线图、为多个子图添加总标题（main title）、自定义设置主标题字体类型、字体大小、字体颜色等
Python使用matplotlib函数subplot可视化多个不同颜色的折线图.为多个子图添加总标题(main title).自定义设置主标题字体类型.字体大小.字体颜色等目录
python使用matplotlib可视化、为可视化图像添加标题（title）、自定义标题的字体格式、字体大小、字体颜色等
python使用matplotlib可视化.为可视化图像添加标题(title).自定义标题的字体格式.字体大小.字体颜色等目录
python使用matplotlib可视化、为可视化图像添加图例（legend）、自定义图例的字体格式、字体大小、字体颜色等
python使用matplotlib可视化.为可视化图像添加图例(legend).自定义图例的字体格式.字体大小.字体颜色等目录
sublime text3 字体样式_Sublime Text3自定义全部字体大小、字体类型和背景颜色
一.定义侧栏的背景颜色.字体大小和间距 1.按键:ctrl+shift+p,弹出窗口中输入pro,选择图中的PackageResourceViewer:Open Resource. 2.在新窗口输入t ...
Java实现一行代码生成二维码，可传输到前端展示，可自定义二维码样式，可设置图片格式，可对二维码添加图片，可对二维码添加文字，可以设置二维码大小、字体大小、字体颜色、边框颜色、边框大小等等
Java实现一行代码生成二维码,可传输到前端展示,可自定义二维码样式,可设置图片格式,可对二维码添加图片,可对二维码添加文字,可以设置二维码大小.字体大小.字体颜色.边框颜色.边框大小等等. 0.准备 ...
IntelliJ IDEA快速入门 | 第十七篇：IntelliJ IDEA中的常用配置（九）——设置默认的字体、字体大小、字体的行间距
统一设置默认字体首先,进入IntelliJ IDEA的设置界面中,并展开Editor这一项,这时你会看到Font,选中它之后,可以看到如下图所示的界面. 然后,在以上界面中修改字体.字体大小以及字体 ...
EasyExcel 设置字体样式（字体、字体大小、字体颜色、字体加粗、字体斜体、字体下划线、字体上标下标、字体删除线）
1 Maven配置 <dependency><groupId>cn.hutool</groupId><artifa ...
python使用matplotlib可视化、使用rcParams参数调整可视化图像中线条宽度、线条类型、文本字体、字体大小、字体颜色、字体类型、文本颜色等
python使用matplotlib可视化.使用rcParams参数调整可视化图像中线条宽度.线条类型.文本字体.字体大小.字体颜色.字体类型.文本颜色等目录
R语言ggplot2可视化指定图像标题（title）、副标题（subtitle）的内容、字体大小、字体类型、色彩、对齐方式等实战
R语言ggplot2可视化指定图像标题(title).副标题(subtitle)的内容.字体大小.字体类型.色彩.对齐方式等实战目录
python设置坐标轴刻度值字体大小_python 设置xlabel,ylabel 坐标轴字体大小，字体类型...
本文介绍了python 设置xlabel,ylabel 坐标轴字体大小,字体类型,分享给大家,具体如下: #--coding:utf-8-- import matplotlib.pyplot as p ...

vue-quill-editor自定义字体大小和字体样式

vue-quill-editor自定义字体大小和字体样式相关推荐

最新文章

热门文章