如何使用 QuillJS 将自定义字体大小添加到工具栏?我尝试了两种方法:
// Initiate the editor
let toolbarOptions = [
['bold', 'italic', 'underline', 'strike'],
[{ 'align': [] }],
[{ 'size': ['10px', '20px', '80px'] }],
[{ 'color': ['#FFF'] }]
];
this.editor = new Quill('#executive-control-editor', {
modules: {
toolbar: toolbarOptions
},
theme: 'snow'
});
和
<div id="toolbar">
<span class="ql-formats">
<button class="ql-bold"></button>
<button class="ql-italic"></button>
<button class="ql-underline"></button>
<button class="ql-strike"></button>
</span>
<span class="ql-formats">
<select class="ql-align"></select>
</span>
<span class="ql-format-group">
<select title="Size" class="ql-size">
<option value="10px">Small</option>
<option value="13px">Normal</option>
<option value="18px">Large</option>
<option value="32px">Huge</option>
</select>
</span>
<span class="ql-formats">
<button class="ql-image"></button>
</span>
</div>
但是它们都不起作用。我在这里缺少什么吗?我也尝试从值中删除 "px";还是什么都没有。
最佳答案
上面接受的答案对我不起作用,但让我走上了正确的轨道。
为了让文本编辑器设置自定义字体大小(并且还在底层值而不是 CSS 类中为字体大小设置内联样式),我必须执行以下操作:
var Size = Quill.import('attributors/style/size');
Size.whitelist = ['14px', '16px', '18px'];
Quill.register(Size, true);
var toolbarOptions = [
[{ 'size': ['14px', '16px', '18px'] }],
];
var quill = new Quill("#quillElementSelector", {
theme: 'snow',
modules: {
toolbar: toolbarOptions
}
});
我还必须修改我的 CSS 以覆盖工具栏下拉菜单上的标签。请注意,CSS 选择器中的“data-value”值必须与上面指定的值匹配。
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14px"]::before {
content: 'Normal';
font-size: 14px !important;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16px"]::before {
content: 'Large';
font-size: 16px !important;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18px"]::before {
content: 'Huge';
font-size: 18px !important;
}
关于javascript - 如何将自定义字体大小添加到 QuillJS 编辑器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38623716/