Dynamics Community Forum Thread Details

CKEDITOR / Rich Text Editor CSS config

Hi Everyone,

I am trying to get the Rich Text Editor to show styles based on some external CSS files we use for our website.
Configs are below, essentially everything works as expected apart from no styling is applied in the preview or designer windows.

I have removed "Sticky Styles" as I need to prevent all the extra Div wrapper it inserts, I can re-enable it if I find a solution to that but even with StickyStyles enabled the CSS isnt working.
Maybe I need a plugin or something, does anyone have any ideas?

{
	"defaultSupportedProps": {
		"extraPlugins": "accessibilityhelp,autogrow,autolink,basicstyles,blockquote,button,collapser,confighelper,contextmenu,copyformatting,dialog,editorplaceholder,find,floatpanel,iframerestrictor,indentblock,justify,notification,panel,panelbutton,pastefromword,format,selectall",
		"removePlugins": "contextmenu,image,stickystyles,superimage,tableresize,tableselection,tabletools",
		"toolbar": [
			["CopyFormatting"],
			["Styles"],
			["Format"],
			["Bold"],
			["Italic"],
			["Underline"],
			["BulletedList"],
			["Outdent"],
			["Indent"],
			["JustifyLeft"],
			["JustifyCenter"],
			["JustifyRight"],
			["Link"],
			["Unlink"],
			["Undo"],
			["Redo"],
			["RemoveFormat"]
		],
		"forcePasteAsPlainText": true,
		"disableImages": true,
		"stylesSet": "cw_styles:/WebResources/cw_styles",
		"format_tags": "p;h2;h3;h4",
		"contentsCss": [
			"https://use.fortawesome.com/kits/747c3a74/publications/latest/eot.css",
			"https://use.fortawesome.com/kits/747c3a74/publications/latest/woff.css",
			"https://use.fortawesome.com/kits/747c3a74/publications/latest/woff2.css"
		],
		"enterMode": 1
	},
	"showAsTabControl": true,
	"showFullScreenExpander": true,
	"showHtml": true,
	"showPreview": true,
	"showPreviewHeaderWarning": true
}

CKEDITOR.stylesSet.add( 'cw_styles', [
	{name: 'Introduction', element: 'p', attributes: { 'class': 'style style--introduction' }},
    {name: 'List Square', element: 'ul', attributes: { 'class': 'style--list-square style--list-no-bg' }},
    {name: 'List Tick', element: 'ul', attributes: { 'class': 'style--list-tick style--list-no-bg' }},
    {name: 'List Circle', element: 'ul', attributes: { 'class': 'style--list-circle style--list-no-bg' }}
]);

And I can see it applies in the Dev console