The Quill publicly available css

问题

My initial intend is to generate PDF files from the HTML outputed by the PrimeFaces TextEditor component, which, in turn, is based on the free and open source WYSIWYG editor Quill.

For this purpose I needed to get the HTML generated by the TextEditor component, enclose it in <html> .... </html> and provide the source of the CSS that are to be applied when generating the PDF.

This is how my text looks like in my PrimeFaces Web-Application:

This is what I get in the debugger when I click on the "Speichern" (Save) button:

as you see, I have a styled, but incomplete HTML. Please pay attention to the part I am interested in:

<span class="ql-size-large">Hello, dear friends!</span>

This is taken directly from the Debugger / TextEditor component of PrimeFaces.

Now, to test the styled text, I augment it with <html> , <head> and <body> tags, so that now it looks like this:

<html>
    <head> <link rel="stylesheet" href="http://cdn.quilljs.com/1.3.6/quill.snow.css"/>
    </head>
    <body>
        <p>
            <span class="ql-size-large">Hello, dear friends!</span>
        </p>
        <p>
            <br />
        </p>
        <p>I am glad to see ALL of you <span style="background-color:rgb( 230 , 0 , 0 )">today</span> here!
        </p>
    </body>
</html>

Debugging information in my browser is now:

in the example above the text on the first row "Hello, dear friends" is styled, but this is not shown in the browser.

As you can see the class applied ql-size-large is not recognized by the browse. Why?

回答1:

The only style in that stylesheet for .ql-size-large is .ql-editor .ql-size-large, meaning it applies to elements with the class ql-size-large which are nested inside an element with class ql-editor. So if you have this snippet:

<span class="ql-size-large">Hello, dear friends!</span>

Then you need to embed this inside an element with the class ql-editor to end up with:

<div class="ql-editor">
    <span class="ql-size-large">Hello, dear friends!</span>
</div>

Then the CSS selector .ql-editor .ql-size-large will apply and style that element.

来源：https://stackoverflow.com/questions/61883696/the-quill-publicly-available-css

标签

html

css

quill