Use twitter bootstrap css class in the ckeditor

Question

I want to use the bootstrap class in the ckeditor 4. But I found the ckeditor will remove the class if I input the class in the source mode. And I want to allow user to select the class from the ckedtior css dropdown list and then show the style directly. Can anybody tell me how to solve this issue?

Answer 1

The solution is actually a combination of two of these answers by Andrey Nelubin and user3250006.

Firstly, in order to force CKEditor to keep your custom HTML and class attributes, you need the allowedContent = true configuration. After that, in order to actually see the formatting in the editor, you need to add an extra path to contentsCss (perhaps your main CSS file, or a subset that just includes Bootstrap).

So, the following works for me:

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

Answer 2

You need to set extra css:

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

Answer 3

user3250006 is half right, then you need to add CKEDITOR.config.extraAllowedContent = 'p,span,h1,h2,h3(class1,class2),img,strong,em(class3)';