Question

我最初的意图是从PrimeFaces TextEditor组件输出的HTML生成PDF文件，而该文件又基于免费和开源的所见即所得编辑器Quill。

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

这是我的PrimeFaces Web应用程序中文本的外观：

这是我单击“ Speichern”（保存）按钮时在调试器中得到的内容：

如您所见，我有一个样式化但不完整的HTML。请注意我感兴趣的部分：

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

这直接来自PrimeFaces的Debugger / TextEditor组件。

现在，要测试样式化文本，我用<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>

现在在我的浏览器中调试信息：

在上面的示例中，第一行“您好，亲爱的朋友”中的文本具有样式，但这在浏览器中未显示。

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

Answer 1

该样式表中唯一用于.ql-size-large的样式是.ql-editor .ql-size-large，这意味着该样式适用于类ql-size-large的元素，这些元素嵌套在一个类的元素中ql-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将应用并设置该元素的样式。

鹅毛笔公开可用的CSS

1 个答案: