Quill: Unable to set up a default font size

Created on 6 Jun 2017  路  3Comments  路  Source: quilljs/quill

I am overriding font-size options and am failing to set up a default font size. The idea is when the Quill loads and a user starts typing, it is of specified font size rather than default (which is 13px as far as I can understand). In the test case below I am setting up 20px as default. It is selected in the toolbar, but is not applied on typed text. Meanwhile, all other options works if select it. But if select 20px - again it is not applied.

I guess an 'optionwith aselected` attribute is treated as default (which is 13px) and it is set up somethere: in the theme or in JavaScript code - I cannot find where. I believe (really-really hope) it is overridable. Or, maybe, it is an issue?

Steps for Reproduction

  1. Run the standalone test case below
  2. Type something
<!DOCTYPE html>
<html>
<head>
    <title>Quill Default Font Size Issue</title>

    <link href="https://cdn.quilljs.com/1.2.5/quill.snow.css" rel="stylesheet">
    <script src="https://cdn.quilljs.com/1.2.5/quill.js"></script>
</head>
<body>
    <div id="standalone-container">
        <div id="toolbar-container">
            <span class="ql-formats">
                <select class="ql-font"></select>
                <select class="ql-size">
                    <option value="10px">10px</option>
                    <option value="12px">12px</option>
                    <option value="14px">14px</option>
                    <option value="16px">16px</option>
                    <option value="20px" selected>20px</option>
                    <option value="24px">24px</option>
                    <option value="36px">36px</option>
                </select>
            </span>
        </div>
        <div id="editor-container"></div>
    </div>

    <script>
        var fontSizeStyle = Quill.import('attributors/style/size');
        fontSizeStyle.whitelist = ['10px', '12px', '14px', '16px', '20px', '24px', '36px'];
        Quill.register(fontSizeStyle, true);

        var quill = new Quill('#editor-container', {
            theme: 'snow',
            modules: {
                toolbar: '#toolbar-container'
            },
            placeholder: 'Compose an epic...'
        });
    </script>
</body>
</html>

Expected behavior:

The typed text is of 20px font size.

Actual behavior:

The typed text is of 14px font size.

Platforms:

Windows 7
Chrome 58.0.3029.110 (64-bit)

Version:

1.2.5

P.S. Thank you very much for Quill and, especially, moving off from iframes!

picture DaniilVeriga

Most helpful comment

Ah, seems, this does the trick:

.ql-container {
    font-size: 20px;
}

Please clarify is that somehow configurable rather than adding this style?

picture DaniilVeriga on 6 Jun 2017
👍8

All 3 comments

Ah, seems, this does the trick:

.ql-container {
    font-size: 20px;
}

Please clarify is that somehow configurable rather than adding this style?

DaniilVeriga picture DaniilVeriga on 6 Jun 2017
👍8

The way to change the default font size is first to actually change the default font size which you have done with CSS. This is the right way to do this.

Since 20px is now the default you should also have this be valueless in the dropdown <option selected>20px</option>. Otherwise there would be two ways to get 20px font and we want to avoid ambiguity whenever possible. You can also remove 20px from the whitelist.

This demonstrates the same except for font family. Since you are using an inline style instead of class some of the other CSS is not necessary.

jhchen picture jhchen on 6 Jun 2017
👍4

I'm doing this to prevent settings being scattered around my app:

.ql-container {
    font-size: inherit !important
}
dschissler picture dschissler on 29 Oct 2020
😄1
Was this page helpful?
0 / 5 - 0 ratings

Related issues

CHR15- picture CHR15-  路  3Comments
kheraud picture kheraud  路  3Comments
markstewie picture markstewie  路  3Comments
emanuelbsilva picture emanuelbsilva  路  3Comments
rsdrsd picture rsdrsd  路  3Comments