Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Unable to set up a default font size #1493

Closed
DaniilVeriga opened this issue Jun 6, 2017 · 8 comments
Closed

Unable to set up a default font size #1493

DaniilVeriga opened this issue Jun 6, 2017 · 8 comments

Comments

@DaniilVeriga
Copy link

DaniilVeriga commented Jun 6, 2017 •
edited
Loading

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!
@DaniilVeriga
Copy link
Author

Ah, seems, this does the trick:

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

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

@jhchen
Copy link
Member

jhchen commented Jun 6, 2017

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 jhchen closed this as completed Jun 6, 2017
@vladikoff vladikoff mentioned this issue Jun 13, 2017
Closed
@dschissler
Copy link

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

.ql-container {
    font-size: inherit !important
}

@thevinitgupta
Copy link

Ah, seems, this does the trick:

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

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

I believe this is incomplete :

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

This seems to be working.

@amir2001482
Copy link

I can`t set a default font-family for quill
Actually I use "quill-view-html" for show content but the font-family that user selected not suitable for my UI
Can someone help me?

@kennyhsieh123
Copy link

kennyhsieh123 commented Jul 20, 2023 •
edited
Loading

I was looking for solutions in customizing font-size of PrimeVue's Editor which is based on Quill editor, and it works like a charm, thank you :)

@lx1229
Copy link

lx1229 commented Oct 23, 2023

Ah, seems, this does the trick:

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

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

I believe this is incomplete :

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

This seems to be working.

This works for me,thanks!

@YoavOG
Copy link

YoavOG commented May 20, 2024 •
edited
Loading

.ql-editor { font-size: initial; }

Worked for me

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
8 participants
@jhchen @DaniilVeriga @dschissler @lx1229 @thevinitgupta @amir2001482 @kennyhsieh123 @YoavOG