The Quill text editor needs to be introduced in the project, and according to the requirements, it is necessary to customize the font options, drag and drop images to upload and change the size, so I studied it according to the Quill official website system. The following are the results of my study and research.
1. Themes
Quill's rich text editor is divided into two types: snow and bubble.
snow has a toolbar, as follows:
The bubble is only text field, as follows:
So how to choose
In the vue project, in the files specifically introduced into Quill, you can write which theme you need to use. The default is snow theme.
<script>
export default {
data:function(){
return{
editorOption:{
//theme:'bubble'
theme:'snow'
}
}
}
}
</script>
Second, customize the toolbar toolbar
1. The specific configuration is as follows, which one needs to be written.
<script>
export default {
data:function(){
return{
editorOption:{
modules:{
toolbar:[
['bold', 'italic', 'underline', 'strike'], // bold, italic, underline, strikethrough
['blockquote', 'code-block'], //quote, code block
[{ 'header': 1 }, { 'header': 2 }], // title, in the form of key-value pairs; 1, 2 represent font size
[{ 'list': 'ordered'}, { 'list': 'bullet' }], //列表
[{ 'script': 'sub'}, { 'script': 'super' }], // subscripts
[{ 'indent': '-1'}, { 'indent': '+1' }], // indent
[{ 'direction': 'rtl' }], // text direction
[{ 'size': ['small', false, 'large', 'huge'] }], // font size
[{ 'header': [1, 2, 3, 4, 5, 6, false] }], // several levels of headers
[{ 'color': [] }, { 'background': [] }], // font color, font background color
[{ 'font': [] }], //font
[{ 'align': [] }], //Alignment
['clean'], //Clear font style
['image','video'] //Upload image, upload video
]
},
theme:'snow'
}
}
}
}
</script>
Among them, color, background, font, and align all have default values, just write an empty data. If you want to customize it, see below.
2. Customize the font list and add the fonts you need
(1) Introduce a separate custom font.css file (below) in the app.vue file, because it needs to be introduced during initialization to override the default! ! Very important
<template>
<div id="app">
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
@import './style/font';
</style>
（2）font.css
Put the fonts that need to be customized in the font list in this css, the selector is as follows. The value after data-value is to be spelled after .ql-font- and needs to be consistent.
[data-value=a] ql-font-a
content refers to the options in the font list
.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: "Arial";
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: "bold";
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: "Italics";
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 Song";
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";
}
(3). In the .vue file
<script>
import { quillEditor } from 'vue-quill-editor'
import * as Quill from 'quill' //Introduce editor
//The font of the quill editor
var fonts = ['SimSun', 'SimHei','Microsoft-YaHei','KaiTi','FangSong','Arial','Times-New-Roman','sans-serif'];
var Font = Quill.import ('formats / font');
Font.whitelist = fonts; //Add the font to the whitelist
Quill.register(Font, true);
export default {
data:function(){
return{
content:'',
editorOption:{
modules:{
toolbar:[
['bold', 'italic', 'underline', 'strike'],
['blockquote', 'code-block'],
[{ 'header': 1 }, { 'header': 2 }],
[{ 'list': 'ordered'}, { 'list': 'bullet' }],
[{ 'script': 'sub'}, { 'script': 'super' }],
[{ 'indent': '-1'}, { 'indent': '+1' }],
[{ 'direction': 'rtl' }],
[{ 'size': ['small', false, 'large', 'huge'] }],
[{ 'header': [1, 2, 3, 4, 5, 6, false] }],
[{ 'color': [] }, { 'background': [] }],
[{ 'font': fonts }], //Put the font array defined above into it
[{ 'align': [] }],
['clean'],
['image','video']
]
},
theme:'snow'
}
}
}
}
</script>
The effect diagram is as follows:
3. Image drag and drop upload ImgeDrop
<script>
import { quillEditor } from 'vue-quill-editor'
import * as Quill from 'quill' //Introduce editor
//quill pictures can be dragged and uploaded
import { ImageDrop } from 'quill-image-drop-module';
Quill.register('modules/imageDrop', ImageDrop);
export default {
data:function(){
return{
editorOption:{
modules:{
imageDrop:true,
},
theme:'snow'
}
}
}
}
</script>
Fourth, image resizing ImageResize
<script>
import { quillEditor } from 'vue-quill-editor'
import * as Quill from 'quill' //Introduce editor
//quill image can be dragged and resized
import ImageResize from 'quill-image-resize-module'
Quill.register('modules/imageResize', ImageResize)
export default {
data:function(){
return{
editorOption:{
modules:{
imageResize: {}
},
theme:'snow'
}
}
}
}
</script>
The effect picture is as follows: You can adjust the alignment of the picture and display the size of the picture
Quill is basically used as above. For installation, please refer to https://blog.csdn.net/alison_rose/article/details/79928483
For other applications, please refer to Quill's official website https://quilljs.com/