如何在 CKeditor 中支持 margin-top 和 margin bottom

Question

我正在使用 CKeditor，我想为文本中的许多段落设置 margin-top 和 margin-bottom 但它不起作用。这些是我到目前为止尝试过的：

1- 直接在编辑器中使用 margin top

<h2 style="margin-top:40px">What are tokens?</h2>

2- 我为 contents.css 添加了新样式：

p.ex1 
{
    margin-top: 100cm;
}

然后我在编辑器中写道：

<p class="ex1">What are tokens?</p>

这两种方式都不起作用，我使用的是 CKeditor v4.6.2 的完整工具栏

还有其他方法可以尝试吗？

Answer 1

您需要告诉 CKEditor 加载您的 CSS 规则并在 <p> 标签中允许您的 class 属性：

创建一个新文件，比方说，my.css 并将其放在 CKEditor 根文件夹中。在 my.css 中键入您的属性，例如：

p.ex1 
{
    margin-top: 100px;
}
p.ex2 
{
    margin-top: 50px;
}

现在，在您的 config.js 中输入：

config.contentsCss = [CKEDITOR.getUrl('contents.css'), CKEDITOR.getUrl('my.css')];
config.extraAllowedContent = 'p(ex1,ex2)';

这将加载 my.css 除了 CKEditor 自己的 contents.css 并指示 CKEditor 允许 <p> 标签带有 class 属性命名为 "ex1" 和 "ex2"，所以你可以有 <p class="ex1">What are tokens?</p>

how to support margin-top and margin bottom in CKeditor