在ckeditor中使用twitter bootstrap css类

Question

我想在ckeditor 4中使用bootstrap类.但是如果我在源模式下输入类,我发现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
});