プロジェクトではリッチテキストエディターVueを使用する必要があるため、リッチテキストエディターであるvue-quill-editorを選択しましたが、選択できるフォントサイズが少なく、製品のニーズを満たすことができないことがわかりました。長い間研究してきましたが、ようやく変更しました。主に、構成ファイル、および対応するCSSファイルとjsファイルを変更する必要があります。
editor.vueページの下のtoolbarOptionsの構成項目を変更します
（Editor.vueはカプセル化されたリッチテキストエディターです）
const toolbarOptions = [
// 原本是 'small',fasle,'large','huge'，改成自己想要设置的大小，这会改变页面下拉框的个数以及每个选项的data-value值，插件的js会根据data-value的值去增加对应的class类名。
[{'size': ['10px', '12px', '14px', '16px' ,'18px', '20px', '22px', '24px', '26px', '32px', '48px']}],
]
次に、node_modulesの下でクイルを見つけ、ディレクトリdistの下でcssファイルとjsファイルを変更します。
以下のquill.core.js
// small,large,huge 这三个是默认的，可以删可以留。后面必须增加和editor配置项一样。
whitelist: ['small', 'large', 'huge','8px','10px','12px','14px','16px','18px','20px','22px','24px','26px','32px','48px']
以下のquill.js
// 跟quill.core.js 同理，修改下面两项,huge及之前都是默认的
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'];
以下のquill.bubble.css
// 需要全部增加一下css选项，需要注意的是data-value=如果是接数字要有引号，字符串可以不带引号
//10px,12px等等新设置的大小都要设置相应的类名字体大小
.ql-editor .ql-size-8px {
font-size: 8px;
}
// select选择的字体大小
.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: '8px';
}
以下のquill.core.css
// 需要全部增加一下css选项
.ql-editor .ql-size-10px {
font-size: 10px;
}
以下のquill.snow.css
// 需要全部增加一下css选项
.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';
}
// select选择的字体大小
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="8px"]::before {
font-size: 8px;
}
ヒント：バックグラウンド管理システムがリッチテキストを編集する場合、フロントページが表示され（vue-quill-editorは参照されません）、フロントページは変更されたcssファイルを参照することを忘れないでください！