ckeditor - 如何在 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 规则并允许您的 class <p> 中的属性标签:

创建一个新文件，假设 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>

更多信息: contentsCss和 extraAllowedContent