Shulou(Shulou.com)05/31 Report--

This article introduces the knowledge of "how to set font size in vue-quill-editor". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Vue-quill-editor sets font size

The project needs to use a rich text editor, using Vue, so I chose vue-quill-editor, a rich text editor, and found that there are only a few font sizes to choose from, which can not meet the needs of the product. The main thing is to change the configuration file, as well as the corresponding CSS and js files.

Change the configuration item of toolbarOptions under the editor.vue page

(editor.vue is an encapsulated rich text editor)

Const toolbarOptions = [/ / originally 'small',fasle,'large','huge', is changed to the size you want, which will change the number of drop-down boxes on the page and the data-value value of each option. The js of the plug-in will increase the corresponding class class name according to the value of data-value. [{'size': [' 10pxregions, '12pxbands,' 14pxbands, '16pxies', '18pxstones,' 20pxstones, '22pxstones,' 24pxstones, '26pxstones,' 32pxbands, '48px']},]

Then find quill under node_modules, and modify the css file and js file under the directory dist.

Under quill.core.js

/ / small,large,huge these three are the default, can be deleted or retained. The same as the editor configuration item must be added later. Whitelist: ['small',' large', 'huge','8px','10px','12px','14px','16px','18px','20px','22px','24px','26px','32px','48px']

Under quill.js

/ / same as quill.core.js Modify the following two items, huge and before are the default whitelist: ['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 quill.bubble.css

/ / all the css options need to be added. It should be noted that if the data-value= is connected to a number with quotation marks, the string can be set without quotation marks / / 10pxthesis 12px and other newly set sizes should be set to the corresponding class name font size. Ql-editor .ql-size-8px {font-size: 8px } / / select selected font size. Ql-bubble .ql-picker.ql-size .ql-picker-item [data-value= "8px"]:: before {font-size: 8px;} .ql-bubble .ql-picker.ql-size .ql-picker-label [data-value= "8px"]:: before,.ql-bubble .ql-picker.ql-size .ql-picker-item [data-value= "8px"]:: before {content: '8pxfont;}

Under quill.core.css

/ / all css options need to be added. Ql-editor .ql-size-10px {font-size: 10px;}

Under quill.snow.css

/ / all css options need to be added. Ql-editor .ql-size-8px {font-size: 8px;} .ql-snow .ql-picker.ql-size .ql-picker-label [data-value= "8px"]:: before,.ql-snow .ql-picker.ql-size .ql-picker-item [data-value= "8px"]:: before {content: '8px' } / / the font size selected by select. Ql-snow .ql-picker.ql-size .ql-picker-item [data-value= "8px"]:: before {font-size: 8px;}

Tips:

If the background management system edits rich text, the foreground page is displayed (without citing vue-quill-editor), and don't forget to reference the changed css file.

Vue-quill-editor style problem

Introduce snow.css and wrap it with the following elements in the page to be displayed

This is the end of the content of "how to set font size for vue-quill-editor". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.