The Quill publicly available css

Question

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: Code should be inline in the question (a jsfilldle should be an addition) 2 : Use a browser developer tool to inspect... All basic things wrong. — Kukeltje, May 19 '20 at 07:32
@Kukeltje This source code between and is generated by the Qull, . The only thing I added is the section. So what is wrong there? The browser recognizes the ql-editor only, but not the ql-size-large class, cause the css refered should supposedly be processed first. Or what would be your suggestion? — Alex Mi, May 19 '20 at 08:17
1) Does your browser's console possibly complain about not loading insecure content from `cdn.quilljs.com...`? 2) What style specifically did you expect to be applied there and style did you find getting applied when inspecting the element? — deceze, May 19 '20 at 08:19
The browser recognizes the ql-editor only, but not the ql-size-large class, cause the css refered should supposedly be processed first somehow befoer being used. Or am I wrong? YOu could open the css yourself and search for both classes as well — Alex Mi, May 19 '20 at 08:20
There's only one `.ql-size-large` style in that sheet, and it's `.ql-editor .ql-size-large` — a `.ql-size-large` element **nested inside** a `.ql-editor` element. — deceze, May 19 '20 at 08:24
`.ql-editor .ql-size-large` applies to `
...`, not to `class="ql-editor ql-size-large"`. — deceze, May 19 '20 at 08:29
But what is the problem? the code in the example is generated by this Quill editor, and it seem not to be recognized by my browser? So Quill is generating wrong HTML or what? Or maybe I should refer other css-s files? But which ones? — Alex Mi, May 19 '20 at 08:29
*How exactly* did what generate that HTML and what part of it did you contribute? If the Quill editor generates HTML that it itself won't style, that sounds like a bug report for the Quill developers. *Assuming* that Quill isn't _that_ buggy, you need to be extremely specific about what part is yours and what part is theirs. — deceze, May 19 '20 at 08:34
The code generated is the one enclosed between and . It was generated by the PrimeFaces TextEditor component, which in turn uses internally Quill. The rest, i.e. the code between and is written by me in an attempt to test the genarted code independently in a web browser. See also https://stackoverflow.com/questions/61870894/convert-html-to-pdf-using-primcefaces-7-0-or-higher-text-editor-and-quill — Alex Mi, May 19 '20 at 08:39
@deceze I put the whole information, now my generated HTML is a bit different (namely, the style ql-editor is not present anymore, but the style ql-size-large (which I am interested in) is still there. So, please help! — Alex Mi, May 19 '20 at 09:20

score 5 · Accepted Answer · answered May 19 '20 at 09:24

5

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.

answered May 19 '20 at 09:24

deceze

510,633
85
743
889

what is your opinion about using the HTML generated then? Apperantly, we have to modify it. But that sounds terrible, does not it? Would it be ok if I just embed the whole HTML inside the tag in a
element?
– Alex Mi May 19 '20 at 09:35
It's useful in that you have full control over what section of your page should get Quill styles and which shouldn't… – deceze May 19 '20 at 10:13
If all content in the original question came from quill, why do you apply the .ql-editor on an additional div that wraps one element? Why not on the body? – Kukeltje May 19 '20 at 10:45
@Kukeltje You can apply it on the body as well, I don't care. The point is, you need to wrap it in *something*. – deceze May 19 '20 at 10:53
but IT is what I'm asking about... you should wrap **all** content generated by Quill in it (if not switching to inline styles), not a part, like done here. If someone, like OP has next to none CSS knowledge they apply it 100% like you do causing other problems or thinking it becomes very difficult to wrap EACH element with a quill class attribute in a div (happend with OP in an additional, not too good question ';-)) – Kukeltje May 19 '20 at 10:58
@Kukeltje Wut? You put the entire HTML that you get from Quill into *one* element (be that the `body` or something else) with the `ql-editor` class. As a PHP sample: `
`. In this sample that Quill HTML is just one element. I did not mean to and IMO didn't insinuate that you need to wrap each individual element. – deceze May 19 '20 at 11:04
No you did not insunuate that, but OP interpreted it this way since ALL inside the body came from Quill (as mentioned in the question) and you wrapped one element inside it with a `div`. Leading OP to think every element with a quill class should be wrapped (due to OP having limited css/webdev knowledge). Cheers... And I think btw instead of the classes, https://quilljs.com/playground/#class-vs-inline-style would be more helpfull in this case – Kukeltje May 19 '20 at 11:15
And I don't mean more helpful than your answer since it is the correct one for what OP is asking (still weird behaviour by quill). See https://stackoverflow.com/questions/61888024/convert-the-html-generated-by-the-primefaces-texteditor-component-into-pdf-apply about OP's confusion – Kukeltje May 19 '20 at 11:21

The Quill publicly available css

1 Answers1

Linked