鹅毛笔公开可用的CSS

问题描述 投票：-1回答：1

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

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

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

enter image description here

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

enter image description here

如您所见，我有样式但不完整的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>

现在在浏览器中调试信息是：

enter image description here

在上面的示例中，第一行“您好，亲爱的朋友”的文字样式设置了，但是在浏览器中未显示。

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

html css quill
1个回答
0
投票

.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将应用并设置该元素的样式。
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.