在ckeditor中使用twitter bootstrap CSS类


Use twitter bootstrap css class in the ckeditor

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

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

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

因此，以下内容对我有用：

1
2
3
4
        CKEDITOR.replace('editor1', {
            contentsCss: [CKEDITOR.basePath + 'contents.css', '/path/to/custom.css'],
            allowedContent: true,
        });
相关讨论

您需要设置额外的CSS：

1
2
3
4
$(function () {
    CKEDITOR.config.contentsCss = [CKEDITOR.basePath + 'contents.css', '/path/to/your/css']
    CKEDITOR.replace('editor1'); // or another instance
});
相关讨论

user3250006是右半边，那么您需要添加
CKEDITOR.config.extraAllowedContent = 'p,span,h1,h2,h3(class1,class2),img,strong,em(class3)';

在设置编辑器的js中尝试以下操作：

CKEDITOR.config.allowedContent = true;

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