css Quill JS -在没有内联块的跨度元素上的Quill大小类上设置行高

uqdfh47h  于 2023-05-02  发布在  其他
关注(0)|答案(1)|浏览(196)

我在一个需要Quill作为WYSIWYG编辑器的环境中。
我在工具栏中添加了“大小”,可以显示小文本、普通文本和大文本。
Quill使用类来设置字体大小,但是,它将类添加到文本所在元素内的<span>中,例如<p>,因此将文本设置为small将产生以下HTML:

<p>This <span class="ql-size-small">is a</span> test</p>

当只有部分副本的字体大小调整时,上述方法可以正常工作。
然而,当我在Quill中将整个段落设置为一个大小时,问题就出现了。这将导致以下HTML:

<p><span class="ql-size-small">This is a test</span></p>

因为现在使用了父<p>标签的line-height,这会导致行和段落之间产生巨大的间隙,如下所示:

因为<span>display: inline,所以我不能在上面设置line-height
所以,我把display: inline-block放在元素上。但这会导致另外两个问题,首先:

第二......让我们假设你想要有一个像下面这样的段落,其中第一行是粗体的,并且在第一行之后有一个<br />(使用Shift+Enter):

但是...现在我在Quill中为这一整段设置了一个大小,现在看起来是这样的(!):

它看起来像这样,因为我们必须将display: inline-block添加到.ql-size-small类中,并且因为Quill将<br />(来自Shift+Enter)放在<span>元素的INSIDE上,所以HTML看起来像这样:

<p>
    <strong style="color: rgb(110, 110, 110);" class="ql-size-small">
        Lorem ipsum dolor sit met
    </strong>
    <span style="color: rgb(110, 110, 110);" class="ql-size-small">
        <br>
        This is a test this is a test this is a test this is a test.&nbsp;This is a test this is a test this is a test this is a test.
    </span>
</p>

现在,对于第二个,如果Quill将<br />放在外部(在<strong><span>元素之间),这不会是一个问题。但是因为我们必须将display: inline-block放在.ql-size-small类上,这样line-height才能工作,所以<br />创建了一个空行。
我不知道该怎么办,似乎没有一个解决方案,让我有:

  • 尺寸
  • Shift+Enter换行
  • 可配置行高,适用于不带inline-block的小文本
  • 没有大的差距

现在,我可以滥用<h5><h6>,并将它们反转为特定于大小写/页面的样式,在这种情况下,我需要一行没有底部边距的粗体文本,但我觉得我不需要这样做。

t3psigkw

t3psigkw1#

编辑Quill附带的css文件。
修改类的行高。ql编辑器

.ql-editor {
  box-sizing: border-box;
  **line-height: 1.42;**
  height: 100%;
  outline: none;
  overflow-y: auto;
  padding: 12px 15px;
  tab-size: 4;
  -moz-tab-size: 4;
  text-align: left;
  white-space: pre-wrap;
  word-wrap: break-word;
}

如果你想在每个段落标签之间添加一些空格,请将此添加到CSS文件的末尾

.ql-editor p {
  margin-bottom:25px !important
}

显然,根据需要修改

相关问题