鹅毛笔公开的CSS [英] The Quill publicly available css
问题描述
我最初的意图是从PrimeFaces TextEditor组件输出的HTML生成PDF文件，而该组件又基于
的免费开源WYSIWYG编辑器Quill。
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.
为此，我需要获取由TextEditor组件生成的HTML，将其包含在< html> .... < / html> 并提供生成PDF时要应用的CSS的来源。
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.
文本在我的PrimeFaces Web应用程序中看起来像：
This is how my text looks like in my PrimeFaces Web-Application:
这是我单击 Speichern（保存）按钮时在调试器中得到的内容：
This is what I get in the debugger when I click on the "Speichern" (Save) button:
为你看，我有一个样式，但是不完整的HTML。请注意我感兴趣的部分：
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>
直接从PrimeFaces的Debugger / TextEditor组件中获取。
This is taken directly from the Debugger / TextEditor component of PrimeFaces.
现在，要测试样式化的文本，我用< html> ，< head> 和< body> 标签，所以现在看起来像这样：
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:
在第一行的文本上方的示例中， Hello，dear friends的样式设置为
in the example above the text on the first row "Hello, dear friends" is styled, but this is not shown in the browser.
如您所见，浏览器无法识别所应用的ql-size-large类。为什么？
As you can see the class applied ql-size-large is not recognized by the browse. Why?
推荐答案
该样式表中唯一的样式为 .ql-size-large 是 .ql编辑器.ql-size-large ，这意味着它适用于 ql-size-large 嵌套在一个类为 ql-editor 的元素中。因此，如果您有以下代码段：
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>
然后您需要将此嵌入到类的元素中ql编辑器 结尾为：
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>
然后CSS选择器 .ql-editor .ql-size-large 将应用并设置该元素的样式。
Then the CSS selector .ql-editor .ql-size-large will apply and style that element.
这篇关于鹅毛笔公开的CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
