CKEDITOR is unable to apply styles from an external stylesheet (configured in config.contentscss) when config.fullPage=true

2
votes

In order to define custom StyleSet in CKEditor with styles from an external stylesheet, configured the following settings:

config.extraPlugins = 'stylesheetparser';
config.contentsCss = '/css/externalStyleSheet.css';
config.stylesSet = [ { name : window.parent.getResource('editor.style.normal'), element : 'span', attributes: { 'class': 'formatnormal' } }, { name : window.parent.getResource('editor.style.small'), element : 'span', attributes: { 'class': 'formatsmall' } }, { name : window.parent.getResource('editor.style.large'), element : 'span', attributes: { 'class': 'formatlarge' } }, { name : window.parent.getResource('editor.style.bold'), element : 'span', attributes: { 'class': 'formatbold' } }, { name : window.parent.getResource('editor.style.smallBold'), element : 'span', attributes: { 'class': 'formatsmallbold' } }, { name : window.parent.getResource('editor.style.largeBold'), element : 'span', attributes: { 'class': 'formatlargebold' } }, { name : window.parent.getResource('editor.style.red'), element : 'span', attributes: { 'class': 'formatred' } }, { name : window.parent.getResource('editor.style.code'), element : 'span', attributes: { 'class': 'formatcode' } }, ];
config.fullPage = true;
config.resize_enabled = false;
config.removePlugins = 'resize,autogrow,elementspath';

Expected result The styleset should show the list of custom styles. Once a text is selected, and a style is selected from the drop-down, the style should get applied.

Actual result The styleset is showing the list of custom styles with the styles applied to the labels themselves. But, when a text is selected inside the editor (which is in an iframe) and a style is selected from the drop-down, the style is applied to the "span" tag but the corresponding CSS is not present in context of the iframe.

Other details When config.fullPage = false, then there is no issue, probably because the editor is not in a different iframe and the CSS is available to it. The issue is with config.fullPage = true, which is required in our case in order to have a vertical scrollbar.

Browser: Chrome Version 66.0.3359.181

OS: Windows 10

CKEditor version: 4.9.2

Installed CKEditor plugins: none, other than the configuration mentioned above.

1
cssiframeckeditorckeditor4.x
Watch the output of Console and Network tab of your F12 developer tools. There should be a hint what is going wrong. – stefan.seeland
@stefan.seeland, there are no errors in the console. – Sainath

1 Answers

0
votes

That is documented behavior:

contentsCss : String | Array The CSS file(s) to be used to apply style to editor content. It should reflect the CSS used in the target pages where the content is to be displayed.

Note: This configuration value is ignored by inline editor as it uses the styles >that come directly from the page that CKEditor is rendered on. It is also ignored in the full page mode in which the developer has full control over the page HTML code.

Read more in the documentation and see the SDK sample.

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

You could load the css in the webpage using ckeditor on, similar to https://jsfiddle.net/z23qxw1y/

CKEDITOR.stylesSet.add('my_styles', [
    // Block-level styles.
    {
      name: 'Blue Title',
      element: 'h2',
      styles: {
        color: 'Blue'
      }
    },
  ]); 
 CKEDITOR.config.stylesSet = 'my_styles';