vue 富文本vue-quill-editor 自定义字号大小和字体样式

一、先创建一个名为font的.css文件,然后引入自定义css

// 字体样式大小
.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: "宋体";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: "黑体";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: "微软雅黑";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: "楷体";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: "仿宋";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";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";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";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";
}

/* 字号设置 */
/* 默认字号 */
.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="14px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14px"]::before {content: "14px";font-size: 14px;
}.ql-size-14px {font-size: 14px;
}.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";font-size: 16px;
}.ql-size-16px {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";font-size: 18px;
}.ql-size-18px {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";font-size: 20px;
}.ql-size-20px {font-size: 20px;
}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="22px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="22px"]::before {content: "22px";font-size: 22px;
}.ql-size-22px {font-size: 22px;
}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="26px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="26px"]::before {content: "26px";font-size: 26px;
}.ql-size-26px {font-size: 26px;
}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="28px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="28px"]::before {content: "28px";font-size: 28px;
}.ql-size-28px {font-size: 28px;
}.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";font-size: 30px;
}.ql-size-30px {font-size: 30px;
}

二、在app.vue引入font.css文件，进行覆盖默认样式

@import "./assets/css/font.css";

三、在script标签中引入quill

import * as Quill from "quill";

四、在script标签中进行注册

//quill编辑器的字体
var fonts = ["SimSun","SimHei","Microsoft-YaHei","KaiTi","FangSong","Arial","Times-New-Roman","sans-serif"
];
var Font = Quill.import("formats/font");
Font.whitelist = fonts; //将字体加入到白名单
Quill.register(Font, true);

// 自定义字号的大小
var sizes = [false, "16px", "18px", "20px", "22px", "26px", "28px", "30px"];
var Size = Quill.import("formats/size");
Size.whitelist = sizes;

五、在data中进行配置

 editorOption: {theme: "snow",modules: {toolbar: [["bold", "italic", "underline", "strike"], // toggled buttons["blockquote", "code-block"],[{ header: [1, 2, 3, 4, 5, 6, false] }],[{ size: sizes }],// 配置字号[{ color: [] }, { background: [] }], //显示背景字体颜色[{ font: fonts }], //显示字体选择[{ align: [] }], //显示居中["image", "video"]]},},

效果:

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

vue 富文本编辑器 quill （含代码高亮、自定义字体、汉化、鼠标悬浮提示、组件封装等）
基本使用安装依赖 npm i quill .vue文件 <div ref="editor" :style="finalStyle"></di ...
现代化富文本编辑器 Quill Editor
介绍近期在弄富文本编辑器相关的内容,其中项目中使用了 Quill Editor(后面简称 Quill).Quill 自称是一个现代化强大的富文本编辑器,它与其它富文本编辑器(例如 UEditor)不 ...
【java奇思妙想】一个能够改变字体颜色、字号大小、字体样式的html网页
代码实现 <!DOCTYPE html> <html><head><meta charset="utf-8"><title&g ...
vue 富文本 quill 编辑器，实现图片上传到服务器，以及实时字数统计
vue 富文本 quill 编辑器,实现图片上传到服务器,以及实时字数统计写在前面 vue 富文本 quill / vue-quill-editor 如何使用图片上传到服务器实时字数统计图片编 ...
tinymce富文本vue使用教程
tinymce富文本vue使用教程一.资源下载二.下载中文语言包三.初始化富文本信息四.扩展插件五.其他注意六.tinymce一些功能配置七.图片上传(个人整理图片上传两种方式) 八.封 ...
Vue 富文本编辑器插件 vue-quill-editor 坑！
Vue3 + vue-quill-editor 安装步骤: vue3 安装vue-quill-editor npm install @vueup/vue-quill vue2 安装vue-quill- ...
富文本插件 quill
插件文档 Quill官方中文文档 · 看云引入quill 之后 main.js // 富文本组件 import Editor from "@/components/Editor" ...
Flask博客实战 - 集成富文本编辑器Quill
富文本编辑器Quill 为什么需要集成富文本编辑器? 一个博客最主要的功能是什么,那就是写作,如果不能对我们发布的内容进行排版美化,那么我们所发布的内容又有什么意义? 对于阅读者来说也是非常的不友好和 ...
如何在富文本编辑器中实现自定义一键排版功能
前言今天写这篇文章主要是解决如何在vue中使用富文本编辑器进行新增一个自定义菜单,通过富文本上传的图片实现一键排版功能使图片默认样式居中定宽处理,文字首行缩进等功能,从源头上杜绝门户网站上显示用户编 ...

vue 富文本vue-quill-editor 自定义字号大小和字体样式

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

最新文章

热门文章