Quill 公开可用的 CSS
我最初的目的是从 PrimeFaces TextEditor 组件输出的 HTML 生成 PDF 文件，而该组件又基于免费开源的 WYSIWYG 编辑器 Quill。
为此，我需要获取 TextEditor 组件生成的 HTML，将其包含在<html>....中</html>，并提供生成 PDF 时要应用的 CSS 源。
这是我的文本在 PrimeFaces Web 应用程序中的样子：
这是当我单击“Speichern”（保存）按钮时在调试器中得到的结果：
如您所见，我有一个样式化但不完整的 HTML。请关注我感兴趣的部分：
<span class="ql-size-large">Hello, dear friends!</span>
这直接取自 PrimeFaces 的调试器/文本编辑器组件。
现在，为了测试样式文本，我用<html>、<head>和<body>标签对其进行了扩充，现在它看起来像这样：
<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>
现在我的浏览器中的调试信息是：
在上面的示例中，第一行的文本“Hello，亲爱的朋友”已设置样式，但这不会在浏览器中显示。
正如您所看到的，浏览器无法识别应用的 ql-size-large 类。为什么？
该样式表中的唯一样式.ql-size-large是，这意味着它适用于嵌套在具有 class 的元素内的具有class.ql-editor .ql-size-large的元素。所以如果你有这个片段：ql-size-largeql-editor
<span class="ql-size-large">Hello, dear friends!</span>
然后您需要将其嵌入到具有类的元素中，ql-editor最终得到：
<div class="ql-editor">
<span class="ql-size-large">Hello, dear friends!</span>
</div>
然后 CSS 选择器.ql-editor .ql-size-large将应用该元素并设置其样式。