vue-quill-editor sets the font size
The project requires a rich text editor and Vue, so I chose the rich text editor vue-quill-editor and found that there are only a few sizes of the fonts to choose from, which cannot meet the needs of the product. After studying for a long time, I finally improved it. The main thing is to change the configuration file, as well as the corresponding CSS and js files.
Change the toolbarOptions configuration item under the page
(It is the encapsulated rich text editor)
const toolbarOptions = [
// It was originally 'small',fasle,'large','huge', and changed to the size you want to set. This will change the number of page drop-down boxes and the data-value value of each option. The js of the plug-in will increase the corresponding class class name according to the data-value value.[{'size': ['10px', '12px', '14px', '16px' ,'18px', '20px', '22px', '24px', '26px', '32px', '48px']}],
]Then go to node_modules to find quill and modify the css file and js file under the directory dist.
under
// Small, large, huge are the default, they can be deleted or left. The same editor configuration item must be added later.whitelist: ['small', 'large', 'huge','8px','10px','12px','14px','16px','18px','20px','22px','24px','26px','32px','48px']
under
// Similarly, modify the following two items, huge and before are both defaultwhitelist: ['small', 'large', 'huge','8px','10px','12px','14px','16px','18px','20px','22px','24px','26px','32px','48px'] var SIZES = ['small', false, 'large', 'huge','8px','10px','12px','14px','16px','18px','20px','22px','24px','26px','32px','48px'];
under
// You need to add all the css options. It should be noted that data-value=If you are confined with numbers, you must have quotes, and the string can be without quotes.//The sizes of 10px, 12px and other newly set must be set to the corresponding class name body size.ql-editor .ql-size-8px {
font-size: 8px;
}
// select the font size selected.ql-bubble .-size .ql-picker-item[data-value="8px"]::before {
font-size: 8px;
}
.ql-bubble .-size .ql-picker-label[data-value="8px"]::before,
.ql-bubble .-size .ql-picker-item[data-value="8px"]::before {
content: '8px';
}under
// You need to add all css options.ql-editor .ql-size-10px {
font-size: 10px;
}under
// You need to add all css options.ql-editor .ql-size-8px {
font-size: 8px;
}
.ql-snow .-size .ql-picker-label[data-value="8px"]::before,
.ql-snow .-size .ql-picker-item[data-value="8px"]::before {
content: '8px';
}
// select the font size selected.ql-snow .-size .ql-picker-item[data-value="8px"]::before {
font-size: 8px;
}tips：
If the backend management system edits rich text, the frontend page will be displayed (the vue-quill-editor is not referenced), don't forget to reference the modified css file on the frontend page!
vue-quill-editor style problem
Introduce and wrap it with the following elements on the page you need to display.
<div class="ql-container ql-snow"> <div class="ql-editor" v-html="content"> </div> </div>
The above is personal experience. I hope you can give you a reference and I hope you can support me more.