如何更改 Quill 中的下拉文本?
how to change the dropdown text in Quill?
我可以更改文本的值,但无法更改 ngx-quill 下拉菜单中的文本
我尝试了 ts 两种方式,但创建新容器仍然无法解决我的问题。浏览了文档,仍然无法找到合适的解决方案 problem.As 文档没有定义如何更改标签
html
<div id="toolBarConfig"></div>
ts
const sizeVal = Quill.import('attributors/style/size');
sizeVal.whitelist = ['14px', '16px', '72px'];
Quill.register(sizeVal, true);
const quill = new Quill('#toolBarConfig', {
modules: {
toolbar: [
['bold', 'italic', 'underline', 'strike'], // toggled buttons
['blockquote', 'code-block'],
[{ header: 1 }, { header: 2 }], // custom button values
[{ list: 'ordered' }, { list: 'bullet' }],
[{ script: 'sub' }, { script: 'super' }], // superscript/subscript
[{ indent: '-1' }, { indent: '+1' }], // outdent/indent
[{ direction: 'rtl' }], // text direction
[{ size: ['14px', '16px', '72px'] }], // custom dropdown
[{ header: [1, 2, 3, 4, 5, 6, false] }],
[{ color: [] }, { background: [] }], // dropdown with defaults from theme
[{ font: [] }],
[{ align: [] }],
['clean'],
['table'], // remove formatting button
['link', 'image', 'video'], //
link and image, video
],
},
theme: 'snow',
});
SCSS
.ql-snow .ql-picker.ql-size span[data-label="14px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-
value="14px"]::before {
content: '14px'!important;
font-size: 14px !important;
}
.ql-snow .ql-picker.ql-size span[data-label="16px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-
value="16px"]::before {
content: '16px'!important;
font-size: 16px !important;
}
.ql-snow .ql-picker.ql-size span[data-label="72px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-
value="72px"]::before {
content: '72px'!important;
font-size: 72px !important;
}
关注这个 Whosebug 线程.. 最终结果
我尝试了 ts 两种方式,但创建新容器仍然无法解决我的问题。浏览了文档,仍然无法找到合适的解决方案 problem.As 文档没有定义如何更改标签
html
<div id="toolBarConfig"></div>
ts
const sizeVal = Quill.import('attributors/style/size');
sizeVal.whitelist = ['14px', '16px', '72px'];
Quill.register(sizeVal, true);
const quill = new Quill('#toolBarConfig', {
modules: {
toolbar: [
['bold', 'italic', 'underline', 'strike'], // toggled buttons
['blockquote', 'code-block'],
[{ header: 1 }, { header: 2 }], // custom button values
[{ list: 'ordered' }, { list: 'bullet' }],
[{ script: 'sub' }, { script: 'super' }], // superscript/subscript
[{ indent: '-1' }, { indent: '+1' }], // outdent/indent
[{ direction: 'rtl' }], // text direction
[{ size: ['14px', '16px', '72px'] }], // custom dropdown
[{ header: [1, 2, 3, 4, 5, 6, false] }],
[{ color: [] }, { background: [] }], // dropdown with defaults from theme
[{ font: [] }],
[{ align: [] }],
['clean'],
['table'], // remove formatting button
['link', 'image', 'video'], //
link and image, video
],
},
theme: 'snow',
});
SCSS
.ql-snow .ql-picker.ql-size span[data-label="14px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-
value="14px"]::before {
content: '14px'!important;
font-size: 14px !important;
}
.ql-snow .ql-picker.ql-size span[data-label="16px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-
value="16px"]::before {
content: '16px'!important;
font-size: 16px !important;
}
.ql-snow .ql-picker.ql-size span[data-label="72px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-
value="72px"]::before {
content: '72px'!important;
font-size: 72px !important;
}
关注这个 Whosebug 线程.. 最终结果