在 Angular 中使用 ckeditor 4 显示所见即所得时删除两个段落之间的间距

Question

我将 Angular 4 与 ckeditor 4.x 一起用于所见即所得。

所以当我显示来自数据库的代码时，在 ckeditor 中的视图是不一样的，即使没有应用段落的样式。

我尝试用 CSS 减少 line-height，但是 no-way，结果是一样的。

我删除了行之间的 margin 但同样重要。

这是 CSS 我试图解决问题的代码：

p, p + p{
    color:rgb(51, 51, 51);
    display:block;
    font-family:sans-serif, Arial, Verdana, "Trebuchet MS";
    font-size:13px;
    line-height:normal;
    margin: 0;
    word-wrap:break-word;
    -webkit-margin-after:0px;
    -webkit-margin-before:0px;
    -webkit-margin-end:0px;
    -webkit-margin-start:0px;
}

<p>This one line</p> 
<p>this is the second lines</p> 
<p>And another one</p> 
<p>And a last lines</p>

这是观点：

这是开发工具中的计算代码

Answer 1

试试这个：删除高度：

p{
    color:rgb(51, 51, 51);
    display:block;
    font-family:sans-serif, Arial, Verdana, "Trebuchet MS";
    font-size:13px;

    line-height:1.2;
    margin: 0;
    word-wrap:break-word;
margin-bottom:10px

}

Answer 2

我通过删除 white-space:pre-wrap; 解决了问题。我不知道为什么要在行之间添加 space。

Answer 3

对于遇到此问题的其他人，这通常是因为您的全局样式 'bleed' 进入了 ckeditor 实例。

因此，如果您为 <p> 设置了一个全局样式集，该样式集具有底部边距（默认设置为 bootstrap），那么您需要在全局级别将其删除：

p {
  margin-bottom: 0;
}

您不能在组件级别设置此样式 CSS 因为这只会影响组件的 html 而不会影响 ckeditor 本身的 html。

在 Angular 中使用 ckeditor 4 显示所见即所得时删除两个段落之间的间距

Remove spacing between two paragraphs when displaying WYSIWIGS with ckeditor 4 in Angular

css

wysiwyg

ckeditor4.x

angular