Ckeditor Add CSS Styling to Preview and Editor

CKEditor add CSS styling to Preview and Editor

Setup CKEDITOR.config.contentsCss variable.
CKEDITOR.config.bodyClass and CKEDITOR.config.bodyId could help too.
These are only options you have (i think).

How can I change the ckeditor iframe CSS styling

Edit the contents.css file that's located in the main CKEditor directory or use the config.contentsCss setting to load a different file.

I see that you confused the styles system settings with content styling. These are two totally different things - styles system is responsible for applying and removing "styles" to selected content - it's used e.g. by styles and format drop downs as well as bold or italic buttons - all of them are "styles".

As for CKEDITOR.addCss() - this method is to be used by plugins mostly and it has to be used before editor is created. Actually, its doc says exactly this and mentions that you should use contents.css ;).

CKEditor issue: How to apply custom css to CKEditor

Did you consider using inline editing instead of the classic version which is using iframes?

The advantage of the inline version is that if, for example, your CSS heavily relies on the hierarchy of elements, it will work definitely better without iframes. Have a look at this code:

<div id="main">
  <div id="content">
    (Here goes the content that is edited inside CKEditor)
  </div>
</div>

and

#main #container h2 {
  font-size:20px;
  color:#07c;
}

The style for the header will most likely not be recognized inside the classic CKEditor, even if you try to use things like config.bodyId, because this way you could fake only one ID: "main" or "container" by adding such ID to the body element.

The inline version will not have this limitation, because the content will not be encapsulated inside the iframe.

One more thing: if the reason why "styles doesn't apply to content" is indeed in the hierarchy of elements inside CSS and you want to use the "old" classic version, you may simply consider providing a dedicated, simplified stylesheet to the editor. Start with the most simple CSS to see if you're on the right path.

How can I couch the CKEditor inline output in custom surrounding HTML with custom CSS files?

I was not able to find a way to integrate html / styling in the way that I had asked for above. And given the radio silence on this issue, I suspect that what I've asked for here may not be possible. I did, however, figure out a way to achieve the next best thing using the preview button. Depending on the item our editors are editing, clicking the preview button will now show an instant preview for that particular item, styled as if it were live on our sites. Here's a step-by-step for those interested.

First, assume we have the following to start:

CKEDITOR.replace('editor', config);

Second, We'll want to add the following to the config and place it before the line above so that the event is registered to the editor:

Object.assign(config, {
  on: {
    contentPreview: function(e) {
      let match = e.data.dataValue.match(/<body[^>]*>((?:.|\s)*)<\/body>/),
        before = '' +
          '<html>' +
            '<head>' +
            '</head>' +
            '<body>',
        content = match[1],
        after = '' +
            '</body>' +
          '</html>;
      e.data.dataValue = before + content + after;
    }
  }
});

content will now contain whatever the user has entered in the editor. And by adding before, content, and after together, we end up with the web page that will be presented in the preview. Only now, the page is under our control, and we can make adjustments based on what page the editor is viewing, other fields on the page, and so on, and we can add in links to our site's live styles.

Let's say that I now want to add in Bootstrap and a link to my site's styling. And let's say I want to surround content with one type of container if an editor is working on a blog and another if he is working on a news story. In this case, I might do something like this:

Object.assign(config, {
  on: {
    contentPreview: function(e) {
      let match = e.data.dataValue.match(/<body[^>]*>((?:.|\s)*)<\/body>/),
        before = '' +
          '<html>' +
            '<head>' +
              '<link href="//stackpath.bootstrapcdn.com/bootstrap/4.5.6/css/bootstrap.min.css" rel="stylesheet" type="text/css">' +
              '<link href="//mylivesite.com/styles.css" rel="stylesheet" type="text/css">' +
              '<script src="//mylivesite.com/scripts.js"></' + 'script>' +
            '</head>' +
            '<body>',
        content = match[1],
        after = '' +
            '</body>' +
          '</html>;
      if (location.pathname.indexOf('blog') > -1)
        content = '' +
          '<div class="row blog">' +
            '<div class="col-sm-8">' + content + '</div>' +
            '<div class="col-sm-4">Blog Right Column Content</div>' +
          '</div>';
      else
        content = '' +
          '<div class="row news">' +
            '<div class="col-sm-8">' + content + '</div>' +
            '<div class="col-sm-4">News Right Column Content</div>' +
          '</div>';
      e.data.dataValue = before + content + after;
    }
  }
});

Now when the preview opens, it will have all the styling from the live site as well as bootstrap columns, so the editor can play with the browser and see how everything will look at various dimensions.

In a sense then, this is superior to just seeing styles in the editor as you type (although that still would be nice), since it allows editors to get a sense of what the content will look like in the context of the page on which it appears after styles have loaded and scripts executed. And if content will appear differently based upon which options the editor has selected, you can build the preview page dynamically based on those values prior to presenting the preview.

This was the solution I ended up with, and my people were very pleased with it, so I thought I would share.

CKEditor 4: How to add CSS stylesheet from plugin?

CKEDITOR.addCss accepts string as a parameter, so there's no way to pass any path there. CKEDITOR.document.appendStyleSheet is correct though (fiddle):

CKEDITOR.replace( 'editor', {
    on: {
        instanceReady: function() {
            this.document.appendStyleSheet( 'http://path.to.your.css' );
        }
    }
} );

Just make sure that:

Your CSS exists.
It has correct permissions to be read.
Your HTML is allowed in the editor (also read the integration guide as since 4.1 you need to adjust allowedContent for your command).

I guess you may also find CKEDITOR.getUrl useful.

How to add custom styles

In a classic editor (with toolbar) you may set config.contentsCss

    CKEDITOR.stylesSet.add('myStylesComboBox',[{
      name: 'my span style',
      element: 'span',
      attributes: {
        'class': 'box1',        
        }
    },
     {
      name: 'my span2 style',
      element: 'span',
      attributes: {
        'class': 'box2'          
        }
    }]);

      var ContentsCss = [
'span.box1{padding:10px;border-radius:8px;background-color:#6950ab;color: #ffffff!important;display:inline-block}',
'span.box2{padding:10px;border-radius:8px;background-color:#6770ab;color: #ffffff!important;display:inline-block}'];

    CKEDITOR.replace( 'editor1',{
      stylesSet: 'myStylesComboBox',
      contentsCss: ContentsCss
    } );

Example:

https://codepen.io/edsonperotoni/pen/JjjvZxz

References:

https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html#cfg-contentsCss

https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html#cfg-stylesSet

Ckeditor Add CSS Styling to Preview and Editor