1. Prepare css file
css file for new font file
.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: "Blackbody";
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: "Microsoft Yahei";
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: "Italian";
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: "Imitation of Song Dynasty";
font-family: "Fang Song";
}
.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: "Fang Song";
}
.ql-font-Arial {
font-family: "Arial";
}
.ql-font-Times-New-Roman {
font-family: "Times New Roman";
}
.ql-font-sans-serif {
font-family: "sans-serif";
}
/* font size setting */
/* default font size */
.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;
}
2. Use the css file
1. Imported into the module
My newly created css file is saved in assets/css/quillEditor.css, and you need to change your own path when using the following code.
<script>
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
// must be imported
import * as Quill from "quill";
// The storage location of the newly created css file, if it is different, it needs to be modified
import "../assets/css/quillEditor.css";
// Custom font, note that the following content should correspond to the css
var fonts = [
"SimSun",
"Sim Hei",
"Microsoft-YaHei",
"KaiTi",
"Fang Song",
"Arial",
"Times-New-Roman",
"sans-serif",
];
// Customize the size of the font size, note that the following content should correspond to the css
var sizes = [false, "16px", "18px", "20px", "22px", "26px", "28px", "30px"];
</script>
2. Register css in quill-editor
I don’t know if that’s the meaning, but it’s just right to write it like this.
var Size = Quill. import("formats/size");
Size. whitelist = sizes;
var Font = Quill. import("formats/font");
Font.whitelist = fonts; //Add the font to the whitelist
Quill. register(Font, true);
3. Complete code
<template>
<quill-editor
v-model="content"
ref="editorRef"
:options="editorOption"
@focus="onEditorFocus($event)"
@blur="onEditorBlur($event)"
@change="onEditorChange($event)"
class="editor"
/>
</template>
<script>
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";
//The font of the quill editor
var fonts = [
"SimSun",
"Sim Hei",
"Microsoft-YaHei",
"KaiTi",
"Fang Song",
"Arial",
"Times-New-Roman",
"sans-serif",
];
// custom font size
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; //Add the font to the whitelist
Quill. register(Font, true);
const toolbarOptions = [
["bold", "italic", "underline", "strike"], // bold italic underline strikethrough -----['bold', 'italic', 'underline', 'strike']
["blockquote", "code-block"], // quote code block -----['blockquote', 'code-block']
[{ list: "ordered" }, { list: "bullet" }], // ordered and unordered lists -----[{ list: 'ordered' }, { list: 'bullet' }]
[{ script: "sub" }, { script: "super" }], // superscript/subscript -----[{ script: 'sub' }, { script: 'super' }]
[{ indent: "-1" }, { indent: "+ 1" }],
[{ size: sizes }], // configure font size
[{ header: [1, 2, 3, 4, 5, 6, false] }], // header -----[{ header: [1, 2, 3, 4, 5, 6, false] } ]
[{ color: [] }, { background: [] }], // font color, font background color-----[{ color: [] }, { background: [] }]
[{ font: fonts }], //Display font selection
[{ align: [] }], // alignment -----[{ align: [] }]
["clean"], // Clear text formatting -----['clean']
['link', 'image', 'video'], // link, image, video -----
];
export default {
name: "TestQuillEditor",
components: { quillEditor },
data() {
return {
content: "",
editorOption: {
theme: "snow",
modules: {
toolbar: toolbarOptions,
},
},
};
},
computed: {
//Current rich text instance
editor() {
return this.$refs.editorRef.quillEditor;
},
},
methods: {
// Prepare rich text editor
onEditorReady() {},
// Rich text editor loses focus event
onEditorBlur() {},
// Rich text editor get focus event
onEditorFocus() {},
// Rich text editor content change event
onEditorChange({ html }) {
// content change event
},
},
};
</script>
<style>
</style>
The knowledge points of the article match the official knowledge files, and you can further learn related knowledge