Use twitter bootstrap css class in the ckeditor

ckeditor, twitter-bootstrap

Solution

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,
        });

Problem

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?

Original source