Use twitter bootstrap css class in ckeditor

Question

I want to use the bootstrap class in ckeditor 4. But I found that ckeditor will delete the class if I bring the class back to its original mode. And I want to allow the user to select a class from the ccedtior css drop-down list, and then show the style directly. Can someone tell me how to solve this problem?

Answer 1

The solution is actually a combination of two of these answers by Andrey Nelyubin and user 3250006.

First, to get CKEditor to keep your own HTML and class attributes, you need the configuration allowedContent = true . After that, to actually see the formatting in the editor, you need to add an additional path to contentsCss (perhaps your main CSS file or a subset that includes only 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 install additional css:

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

Answer 3

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

Answer 4

Try configuring the editor in js:

CKEDITOR.config.allowedContent = true;

This worked for me when I needed to go through bootstrap classes in content templates.