?

不用修改下載的源文件，直接在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自定义字体大小和字体样式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。