ckeditor and custom CSS

Subject:

When using the CKEDITOR for functionality to modify content on a web site.  The problem with custom CSS inside the CKEDITOR iframe isn't not recognized.Furthermore I see in the elemts that any customer classes or id's are stripped.To remove the stripping of custom class or id

  • go into the config.js file and add:
    • config.allowedContent = true;

To add custom CSS (and modify any default CSS already there)

  • go into the CKEDITOR folder and add your CSS in contents.css

help references:

http://drupal.stackexchange.com/questions/90710/prevent-wysiwygckeditor-from-stripping-html-classes

 

2015-06-03 14:45:51gstlouis

this is the same if you have img src file you have to set pre-defined path

in the config.js file in CKEDITOR folder

//have to set pre path ex:
config.baseHref = '../../';

gstlouis
vote
2015-06-03 15:38:48

In order to get this to work in I did the following.  You need to make sure its outside the replace

 

  CKEDITOR.replace('editor1', {
                  //contentsCss: [CKEDITOR.basePath + 'font-awesome.min.css'],
                  //contentsCss: [CKEDITOR.basePath + 'bootstrap.min.css'],

                  //contentsCss: [CKEDITOR.basePath + 'font-awesome.min.css', '/assets/'],
                  allowedContent: true,
                  });

                  CKEDITOR.config.image_previewText = 'This is a test placeholder content text.  it is here to show you how your image will look like with content text around it.  This is a test placeholder content text.  it is here to show you how your image will look like with content text around it.';
                  //CKEDITOR.config.contentsCss = '/assets/css/bootstrap.min.css' ;
                  //CKEDITOR.config.contentsCss = '/assets/css/font-awesome.min.css' ;
                  CKEDITOR.config.contentsCss = ['/assets/css/bootstrap.min.css','/assets/css/font-awesome.min.css'];

gstlouis
vote
2016-01-03 23:54:53