首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何使用带有自定义Quill工具栏的默认字体大小选择器?

如何使用带有自定义Quill工具栏的默认字体大小选择器?
EN

Stack Overflow用户
提问于 2022-02-13 14:58:25
回答 1查看 1.6K关注 0票数 0

普通/默认Quill编辑器使用这种大小编辑器:

我正在使用Quill提供的工具构建一个自定义工具栏。看起来是这样的:

代码语言:javascript
运行
复制
        const toolbarOptions = [
            [
                { font: ['Lato,sans-serif'] },
            ],
            ['size'],
            ['bold', 'italic', 'underline'],
            ['link'],
            ['clean'],
        ];

['size']是无效的语法,因为如果您使用该语法,工具栏上不会显示任何内容:

如果我将'size‘数组更改为[{ size: ['10px', '12px' ... }]等,则下拉列表最后如下所示:

如何在自定义选项配置中使用编辑器附带的默认大小?

EN

回答 1

Stack Overflow用户

发布于 2022-02-13 15:51:42

您可以重写编辑器的CSS以更改标签和字体大小的内容。在样式表之后添加自定义样式时优先。我将默认值保留在下面的代码段中。

代码语言:javascript
运行
复制
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
    }
});
代码语言:javascript
运行
复制
<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>

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/71101854

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档