twitter-bootstrap - 在 ckeditor 中使用 twitter bootstrap css 类

Question

我想在ckeditor 4中使用引导类。但是我发现如果我在源模式下输入类，ckeditor会删除该类。我想让用户从 ckedtior css 下拉列表中选择类，然后直接显示样式。谁能告诉我如何解决这个问题？

Answer 1

该解决方案实际上是 Andrey Nelubin 和 user3250006 的其中两个答案的组合。

首先，为了强制 CKEditor 保留您的自定义 HTML 和类属性，您需要进行allowedContent = true配置。之后，为了在编辑器中实际看到格式，您需要添加一个额外的路径contentsCss（可能是您的主 CSS 文件，或仅包含 Bootstrap 的子集）。

所以，以下对我有用：

        CKEDITOR.replace('editor1', {
            contentsCss: [CKEDITOR.basePath + 'contents.css', '/path/to/custom.css'],
            allowedContent: true,
        });

Answer 2

您需要设置额外的 css：

$(function () {
    CKEDITOR.config.contentsCss = [CKEDITOR.basePath + 'contents.css', '/path/to/your/css']
    CKEDITOR.replace('editor1'); // or another instance
});

Answer 3

user3250006 对了一半，那么你需要添加 CKEDITOR.config.extraAllowedContent = 'p,span,h1,h2,h3(class1,class2),img,strong,em(class3)';

Answer 4

在设置编辑器的 js 中试试这个：

CKEDITOR.config.allowedContent = true;

当我需要在内容模板中传递引导类时，这对我有用。