普通/默认的 Quill 编辑器使用这种尺寸编辑器:
我正在使用 Quill 提供的工具构建自定义工具栏。看起来像这样:
const toolbarOptions = [
[
{ font: ['Lato,sans-serif'] },
],
['size'],
['bold', 'italic', 'underline'],
['link'],
['clean'],
];
['size']
是无效语法,因为如果您使用它,工具栏上不会显示任何内容:
如果我将“大小”数组更改为
[{ size: ['10px', '12px' ... }]
等,下拉列表最终看起来像这样:
如何在选项的自定义配置中使用编辑器附带的默认大小?
您可以覆盖编辑器的 CSS 来更改标签内容和字体大小。在样式表之后添加时,自定义样式将优先。我在下面的代码片段中留下了注释的默认值。
const toolbarOptions = [
[
{ font: ['Lato,sans-serif'] },
],
[{ 'size': ['small', false, 'large', 'huge'] }],
['bold', 'italic', 'underline'],
['link'],
['clean'],
];
const quill = new Quill('#editor', {
theme: 'snow',
modules: {
toolbar: toolbarOptions
}
});
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
<style>
.ql-container {
box-sizing: border-box;
font-family: Helvetica, Arial, sans-serif;
/* font-size: 13px; */
font-size: 12px;
height: 100%;
margin: 0px;
position: relative;
}
.ql-editor .ql-size-small {
/* font-size: 0.75em; */
font-size: 10px;
}
.ql-editor .ql-size-large {
/* font-size: 1.5em; */
font-size: 14px;
}
.ql-editor .ql-size-huge {
/* font-size: 2.5em; */
font-size: 16px;
}
.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
/* content: 'Normal'; */
content: '12px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
/* content: 'Small'; */
content: '10px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
/* content: 'Large'; */
content: '14px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {
/* content: 'Huge'; */
content: '16px';
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
font-size: 10px;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
/* font-size: 18px; */
font-size: 14px;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {
/* font-size: 32px; */
font-size: 16px;
}
</style>
<div id="editor">
<p>Hello World!</p>
<p>Some initial <strong>bold</strong> text</p>
<p><br></p>
</div>
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
对于CSS中的每个尺寸更改标签
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="12px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="12px"]::before {
content: "12px";
}