| Vue中使用quill | 您所在的位置：网站首页 › wincc时间控件字体大小不能改 › Vue中使用quill |
Vue中使用quill
|
系列文章目录
一、 Vue中使用quill-editor之初体验 二、 Vue中使用quill-editor之修改工具栏(toolbar) 三、 Vue中使用quill-editor之增加字体和文字大小 四、 Vue中使用quill-editor之二次封装quill-editor 文章目录 系列文章目录前言一、准备css文件二、使用该css文件1.引入到模块中2.将css注册到quill-editor中 三、完整代码总结 前言上篇文章介绍了如何修改quill-editor的工具栏，但是quill-editor工具栏中的字体和文字大小种类较少，所以本篇文章介绍如何增加工具栏中的字体种类和文字大小。 友情提醒：以下内容在本地测试无误，如果有不清楚的内容，建议查看系列文章的前几篇 一、准备css文件新建字体文件的css文件 .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; } 二、使用该css文件 1.引入到模块中本人新建的css文件保存在assets/css/quillEditor.css，使用下面代码时需要改成自己的路径。 import { quillEditor } from "vue-quill-editor"; import "quill/dist/quill.core.css"; // import styles import "quill/dist/quill.snow.css"; // for snow theme import "quill/dist/quill.bubble.css"; // for bubble theme // 必须要引入 import * as Quill from "quill"; // 新建的css文件的保存位置，如不同，需要修改 import "../assets/css/quillEditor.css"; // 自定义的字体，注意下面的内容要和css里面对应上 var fonts = [ "SimSun", "SimHei", "Microsoft-YaHei", "KaiTi", "FangSong", "Arial", "Times-New-Roman", "sans-serif", ]; // 自定义字号的大小，注意下面的内容要和css里面对应上 var sizes = [false, "16px", "18px", "20px", "22px", "26px", "28px", "30px"]; 2.将css注册到quill-editor中不知道是不是这么个意思，反正这么写就对了。 var Size = Quill.import("formats/size"); Size.whitelist = sizes; var Font = Quill.import("formats/font"); Font.whitelist = fonts; //将字体加入到白名单 Quill.register(Font, true); 三、完整代码 import { quillEditor } from "vue-quill-editor"; import "quill/dist/quill.core.css"; // import styles import "quill/dist/quill.snow.css"; // for snow theme import "quill/dist/quill.bubble.css"; // for bubble theme import "../../assets/css/quillEditor.css"; import * as Quill from "quill"; //quill编辑器的字体 var fonts = [ "SimSun", "SimHei", "Microsoft-YaHei", "KaiTi", "FangSong", "Arial", "Times-New-Roman", "sans-serif", ]; // 自定义字号的大小 var sizes = [false, "16px", "18px", "20px", "22px", "26px", "28px", "30px"]; var Size = Quill.import("formats/size"); Size.whitelist = sizes; var Font = Quill.import("formats/font"); Font.whitelist = fonts; //将字体加入到白名单 Quill.register(Font, true); const toolbarOptions = [ ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike'] ["blockquote", "code-block"], // 引用 代码块-----['blockquote', 'code-block'] [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表-----[{ list: 'ordered' }, { list: 'bullet' }] [{ script: "sub" }, { script: "super" }], // 上标/下标-----[{ script: 'sub' }, { script: 'super' }] [{ indent: "-1" }, { indent: "+1" }], [{ size: sizes }], // 配置字号 [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题-----[{ header: [1, 2, 3, 4, 5, 6, false] }] [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色-----[{ color: [] }, { background: [] }] [{ font: fonts }], //显示字体选择 [{ align: [] }], // 对齐方式-----[{ align: [] }] ["clean"], // 清除文本格式-----['clean'] ['link', 'image', 'video'], // 链接、图片、视频----- ]; export default { name: "TestQuillEditor", components: { quillEditor }, data() { return { content: "", editorOption: { theme: "snow", modules: { toolbar: toolbarOptions, }, }, }; }, computed: { //当前富文本实例 editor() { return this.$refs.editorRef.quillEditor; }, }, methods: { // 准备富文本编辑器 onEditorReady() {}, // 富文本编辑器 失去焦点事件 onEditorBlur() {}, // 富文本编辑器 获得焦点事件 onEditorFocus() {}, // 富文本编辑器 内容改变事件 onEditorChange({ html }) { //内容改变事件 }, }, };效果图： 本篇文章讲述了如何增加quill-editor的字体和文字大小，下篇文章将介绍如何二次封装quill-editor。 |
【本文地址】
公司简介
联系我们