文章目錄
- 1 新版（Quill@2 以上版本）
- 2 舊版（Quill@1版本）
1 新版（Quill@2 以上版本）
注意：新版設置
style="font-family: Wingdings 2"這種帶空格的字體樣式會被過濾掉，故需特殊處理去掉空格
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Quill Wingdings 2 Font</title><!-- 引入 Quill 的 CSS 文件 --><linkhref="https://cdn.jsdelivr.net/npm/quill@2/dist/quill.snow.css"rel="stylesheet"/><style>/* 使用 @font-face 引入 Wingdings 2 字體文件 */@font-face {font-family: 'Wingdings2';src: url('Wingdings2.ttf'); /* 替換為實際的字體文件路徑 */}.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='false']::before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='false']::before {content: '字體';}.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: '仿宋';}.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='Wingdings2']::before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='Wingdings2']::before {content: 'Wingdings 2';}</style></head><body><!-- Quill 編輯器的容器 --><div id="editor" style="height: 300px"></div><!-- 引入 Quill 的 JavaScript 文件 --><script src="https://cdn.jsdelivr.net/npm/quill@2/dist/quill.js"></script><script>const Font = Quill.import('attributors/style/font')const fonts = ['false', 'FangSong', 'Wingdings2']Font.whitelist = fontsQuill.register(Font, true)// 創建 Quill 實例const quill = new Quill('#editor', {theme: 'snow',modules: {toolbar: [[{ font: fonts }],['bold', 'italic', 'underline'],['color', 'background'],],},})const html ='<span style="color: red; font-family: FangSong;">這是一段紅色的文字<span style="font-family: Wingdings2;">R</span></span>'const delta = quill.clipboard.convert({ html })quill.setContents(delta)</script></body>
</html>
2 舊版（Quill@1版本）
注意：舊版同時設置
style="font-family: Wingdings2"和class="ql-font-Wingdings2"時字體樣式會被過濾掉，故需特殊處理去掉style
舊版Quill也可以使用新版Quill修改方式，若能確保環境下一定有Wingdings 2字體，也可以采用下述方式，不再額外引入字體
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Quill Set Font Size</title><!-- 引入 Quill 的 CSS 文件 --><linkhref="https://cdn.quilljs.com/1.3.7/quill.snow.css"rel="stylesheet"/><style>.ql-font-Wingdings2 {font-family: 'Wingdings 2';}</style></head><body><!-- Quill 編輯器的容器 --><div id="editor" style="height: 300px"></div><!-- 引入 Quill 的 JavaScript 文件 --><script src="https://cdn.quilljs.com/1.3.7/quill.js"></script><script>const Font = Quill.import('formats/font')Font.whitelist = ['Wingdings2'] //將字體加入到白名單Quill.register(Font, true)// 創建 Quill 實例const quill = new Quill('#editor', {theme: 'snow',modules: {toolbar: false,},})const html ='<p><span style="color: red" class="ql-font-Wingdings2">這是一段紅色加粗文R本。</span></p>'// 將 HTML 轉換為 Deltaconst delta = quill.clipboard.convert(html)quill.setContents(delta)</script></body>
</html>
】解鎖家政平臺測試秘籍：計劃與策略全解析)
)
