程序员经验分享-hwhale

Quill 公开可用的 CSS

2024-05-19

我最初的目的是从 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> and <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 is .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将应用该元素并设置其样式。

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

html

css

quill

Quill 公开可用的 CSS 的相关文章

  • 为什么开发者讨厌 iframe？ [复制]

    这个问题在这里已经有答案了 可能的重复 iframe 被认为是 不好的做法 吗 https stackoverflow com questions 362730 are iframes considered bad practice 在与

  • 如何为 HTML 元素创建鼠标拖动滑块？

    我发现的许多滑块插件要么仅单击以查看下一个图像 要么如果它们确实具有鼠标拖动或触摸拖动功能 则仅允许图像 有谁知道为任何 html 元素编写鼠标拖动滑块的插件或可能的方法 我专门使用 SVG 但将来如果能在 div 元素之间滑动就更好了 H

  • 更改元素的顺序

    我正在创建一个浮动宽度的网站 用户在智能手机上使用从全高清分辨率到约 600 像素的屏幕 这似乎是一个不错的主意 这就带来了一个非常有趣的问题 当用户使用比最佳分辨率更小的分辨率时 页面的高度会增加很多 这意味着更改某些元素 例如某些图像

  • 引导导航栏菜单与文本重叠

    我使用最新版本的引导程序 当我调整屏幕浏览器的大小时 使用小切换按钮下拉导航栏时 导航栏会重叠页面上的文本 而不是向下推页面内容 我已经多次研究过这个问题 我尝试将 padding bottom 放在导航栏上 将 padding top 放

  • CSS：仅显示字符串的前两个字母

    是否可以使用纯 CSS 仅显示字符串的前两个字母 到目前为止我已经尝试过 没有成功 first letter 仅针对第一个字母 无论如何对我不起作用 nth of everything 需要额外的 javascript 文本溢出 省略号 正

  • 如何在不使用变换或顶部/左侧的情况下转换列表中项目的位置

    有一天我偶然发现一个例子 https codepen io itslit pen gvKrMY它使用 Vue js 但我的问题更多是关于 Vue 用于实现状态之间转换的 CSS 和 HTML 卡片暂时获得等级 shuffleMedium m

  • Masonry - imagesLoaded - 不是函数

    Masonry and imagesLoaded应加载并正常工作 已经制作了一个类似的网站 并且可以正常运行 我不知道我的问题出在哪里 所以我希望你能看到问题所在 应该是少了点什么 在 Chrome Inspect 中 我收到以下错误 Un

  • jQuery - 如何从 div > p 获取文本

    如何从 div 类中获取主题名称 div class subject img src image eng jpg p English p div div class subject img src image bio jpg p Biolo

  • 获取 FileReader() 的结果对象

    有什么方法可以在不通过函数的情况下获取 FileReader 的结果对象 我在下面制作了示例代码 HTML br br br div div JS var code lorem ipsum input type file change fu

  • @media语法/可能的组合

    我见过其中一些 media print media screen handheld print projection media all media all and property value media screen and prope

  • 如何在更大的 div 中垂直和水平居中一个 div？

    如何将一个 水平居中于另一个 中 我设法使用已接受答案中的样式水平居中 我怎样才能让它垂直居中 内部 div 的高度未知 https stackoverflow com questions 114543 how to center div

  • 将图像作为框架放置在 iframe 周围？

    我有一个网站尝试以移动格式显示 但在宽屏幕上 我确信 iframe 是正确的选择 我正在尝试将 iframe 加载到 iPhone 的图像中 你可以看一个例子here http webfro gs south tour iframe tes

  • 如何在codeigniter中将上传图片比例限制为16:9？

    这是我用来上传图像的代码 this gt load gt library upload ext pathinfo file name PATHINFO EXTENSION img name now ext imgConfig upload

  • 如何选择具有“A”类但不具有“B”类的 div？

    我有一些 div div class A Target div div class A B NotMyTarget div div class A C NotMyTarget div div class A D NotMyTarget di

  • Jquery 数据表列总和

    我只是参考一下这个链接 https datatables net examples advanced init footer callback html了解如何获取 jquery 数据表中的列总计 但我已经完成了一半的项目 我在html页面

  • Firefox 不会在使用 jQuery AJAX 加载的内容上呈现 CSS 样式

    我有一个网站 允许用户对书籍和文章发表评论 主表单有一个搜索输入 用于查找相关书籍或文章 来源 我使用 jQuery 根据输入的搜索词从外部站点动态加载新源 然后还使用 AJAX 返回列表中的源 我有两个问题 现在 在用户输入四个字符后 j

  • 在 HTML5 画布中，如何用我选择的背景遮盖图像？

    我试图用画布来实现这一点 globalCompositeOperation 但没有运气 所以我在这里问 这里有类似的问题 但我没有在其中找到我的案例 我的画布区域中有图层 从下到上的绘制顺序 画布底座填充纯白色 fff 用fillRect

  • 使用css bootstrap时如何仅向一列添加右边框？

    我正在尝试使用CSS引导框架 http getbootstrap com css tables在我的项目中 我正在使用带有以下类的表table table bordered table striped 我想删除除第一列之外的所有列的边框 这

  • CSS溢出文本显示在几行中，没有断字

    我有一些长文本显示在 div 中 该 div 具有固定的宽度和高度 我希望文本显示在几行上 作为 div 高度 并且句子单词不会中断 一行中的单词前缀和下一行中的继续 此外 我想在末尾添加省略号最后一句话 CSS white space n

  • 在 Nexus 7 2013 上更改方向时 CSS 媒体查询不起作用

    我目前正在我的笔记本电脑 台式电脑和 Nexus 7 2013 上测试 CSS 媒体查询 除了 Nexus 7 之外 它们在台式机和笔记本电脑上都运行良好 当我更改方向时 除非刷新页面 否则样式不会应用 例如 以纵向模式握住设备时 页面正常

随机推荐

  • ruby 认为我正在引用顶级常量，即使我指定了完整的命名空间

    在我的应用程序中我有 class User include User Foo end User Foo定义在 app models user foo rb 中 现在我正在使用一个定义自己的库Foo班级 我收到此错误 警告 User Foo

  • 为沙盒 Cocoa 应用程序创建临时文件

    我的应用程序是沙箱化的 根据最新的应用程序商店指南 我想创建一些临时文件 我可以这样做吗 如果 是 我可以在哪里这样做 有没有预先指定的路径 还有访问该路径的命令 您应该使用NSTemporaryDirectory 函数 它将查找并返回适合

  • 按外键字段的计数排序？

    我有一个用户模型和一个提交模型 每个提交都有一个名为 user subscribed 的外键字段 用于上传该提交的用户 class Submission models Model uploaded by models ForeignKey

  • jquery-traversing：选择 -> 选项 -> 文本

    我想将变量与选择 gt 选项 gt 选择的文本进行比较 以更改 选定 属性 这是我的代码 它有效 但我认为这不是最好的编写方式 请原谅我的英语 我使用谷歌翻译寻求帮助嘿嘿嘿 var lista example 1 id option eac

  • 使用纯 CSS 创建向上和向下箭头图标或按钮

    我正在尝试使用纯 CSS 且无背景图像创建如下所示的 向上和向下 控制按钮 但是当我在 中添加箭头的CSS时li className after or li className before 主盒子的位置移动了 这是我遇到的问题的小提琴 g

  • 将 nvidia 运行时添加到 docker 运行时

    我正在运行虚拟机GCP配备特斯拉 GPU 并尝试部署一个PyTorch基于应用程序使用 GPU 加速 我想让 docker 使用这个 GPU 可以从容器访问它 我设法在主机上安装了所有驱动程序 并且该应用程序在那里运行良好 但是当我尝试在

  • Pandas 中的 Groupby、转置和追加？

    我有一个数据框 如下所示 每个用户有10条记录 现在 我想创建一个如下所示的数据框 userid name1 name2 name10 这意味着我需要反转该列的每 10 条记录name并附加到新的数据框 那么 它是如何做到的呢 有什么办法可

  • 类函数/变量在使用之前是否必须声明？

    所以我在学习课程时偶然发现了一些对我来说相当尴尬的事情 class Nebla public int test printout return x void printout printout2 private int x y void p

  • 我可以让这个 Ruby 代码更快并且/或使用更少的内存吗？

    我有一个Array of StringRuby 中的对象由如下单词组成 animals cat horse dog cat dog bird dog sheep chicken cow 我想将其转换为另一个Array of String对象

  • Firebase 安全规则：限制仅写入此 uid，几个字段除外

    在 Firebase 我有一个users 节点 看起来像 users someUid username someUsername activeConversations profile picture lots of other child

  • 带有 git Remote 的 Gem 文件在 Heroku 推送上失败

    我的 gemfile 中有以下行 gem client side validations git gt email protected cdn cgi l email protection Dakuan client side valida

  • 如何在 R 中执行近似（模糊）名称匹配

    我有一个专门用于生物学期刊的大型数据集 该数据集是由不同的人长时间编写的 因此 数据不采用单一格式 例如 在 作者 栏中我可以找到John Smith Smith John Smith J等 但它们是同一个人 我连最简单的动作都做不了 例如

  • 如何使用可变参数宏调用嵌套构造函数？

    我正在尝试在 Rust 中创建一个宏 让我可以编写 make list 1 2 3 代替 Node new 1 Node new 2 Node new 3 None 它应该适用于任意数量的 参数 包括零 这是我到目前为止所拥有的 macro

  • 在 VB 2010 中禁用“默认实例”

    我已经开始在 VB 2010 中做一些基本的 win 表单工作 我真的很烦恼默认实例 https stackoverflow com q 4698538 794234特征 有没有办法可以完全禁用它并像普通类一样使用这些类 向表单的构造函数添

  • ASP.NET - 如何在页面中编写一些 html？与 Response.Write？

    我需要根据字符串变量更改我正在编码的 asp net 页面区域中的一些 html 我正在考虑创建一个标签 然后更改其上的文本 但字符串变量包含类似以下内容 h2 p Notify p alert h2 所以 我认为将其赋予标签文本不是一个好

  • Java 枚举相对于旧的“类型安全枚举”模式的优势？

    在 JDK1 5 之前的 Java 中 Typesafe Enum 模式是实现只能采用有限数量值的类型的常用方法 public class Suit private final String name public static final

  • 使用 Mockito 模拟构建版本

    我的目标是用 Mockito 模拟 Build Version SDK INT 已经尝试过 final Build VERSION buildVersion Mockito mock Build VERSION class doReturn

  • 无法在 Windows 上使用 Gnustep 编译 Objective C

    嗨 我是初学者 学习目标c 我发现错误 hello m 1 34 Foundation Foundation h 没有这样的文件或目录 我开始知道我需要制作一个 make 文件 我可以知道如何制作 make 文件吗 无需创建 makefil

  • ruby on Rails：音频/mp3 内容标题下载

    如何在 ruby rails 中设置下载标题 在 php 中 我为 mp3 下载设置标头 如下所示 header Content Transfer Encoding binary header Content type audio mp3

  • Quill 公开可用的 CSS

    我最初的目的是从 PrimeFaces TextEditor 组件输出的 HTML 生成 PDF 文件 而该组件又基于 免费开源 WYSIWYG 编辑器 Quill 为此 我需要获取 TextEditor 组件生成的 HTML 将其包含在

热门标签