To create a custom StyleSet in CKEditor using styles from an external stylesheet, I configured the settings as follows:
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';
Desired Outcome The StyleSet should display a list of custom styles. When text is selected and a style is chosen from the drop-down menu, the selected style should be applied.
Actual Outcome The StyleSet shows the custom styles with the styles being applied to the labels themselves. However, when text is selected within the editor (inside an iframe) and a style is selected from the drop-down, the style is only applied to the "span" tag without the corresponding CSS present in the context of the iframe.
Additional Information With config.fullPage = false, there are no issues, likely because the editor is not within a separate iframe and has access to the CSS. The problem arises with config.fullPage = true, which is necessary for us 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.