羽毛笔公开可用 css

Question

我最初的打算是从 PrimeFaces TextEditor 组件输出的 HTML 生成 PDF 文件，而该组件又基于免费开源的 WYSIWYG 编辑器 Quill。

为此，我需要获取由 TextEditor 组件生成的 HTML，将其包含在 <html> .... </html> 中并提供 [=49] 的来源=] 将在生成 PDF 时应用。

这是我的文本在我的 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, dear friends" 上的文本已设置样式，但这未显示在浏览器中。

如您所见，class 应用的 ql-size-large 无法被浏览器识别。为什么？

Answer 1

该样式表中 .ql-size-large 的唯一样式是 .ql-editor .ql-size-large，这意味着它适用于 class ql-size-large 嵌套在其中的元素具有 class ql-editor 的元素。所以如果你有这个片段：

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

然后您需要将此 嵌入到带有 class ql-editor 的元素中，以得到：

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

然后 CSS 选择器 .ql-editor .ql-size-large 将应用该元素并设置其样式。

羽毛笔公开可用 css

The Quill publicly available css

html

css

quill