在Angular中使用ckeditor 4显示WYSIWIGS时，删除两段之间的间距

Question

我正在使用Angular 4和ckeditor 4.x来实现WYSIWYG。

因此，当我从数据库中显示代码时，ckeditor中的视图不一样，即使没有使用段落的样式。

我试图用CSS减少qazxsw poi但是没办法，这是相同的结果。

我删除了线之间的line-height，但同样重要。

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

margin

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

试试这个：删除高度：

Answer 2

我通过删除qazxsw poi来解决问题。我不知道为什么它会在行之间添加空格。

Answer 3

对于遇到此问题的其他人来说，通常是因为您的全局样式“流失”到ckeditor实例中。

因此，如果你为

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

}

设置了一个全局样式，它具有margin-bottom（默认情况下是bootstrap集），那么你需要在全局级别删除它：

white-space:pre-wrap;

您无法在组件级CSS上设置此样式，因为这只会影响组件的html，而不会影响ckeditor本身内部的html。