Skip to main content

Notifications

Announcements

No record found.

Microsoft Dynamics CRM forum
Unanswered

CKEDITOR / Rich Text Editor CSS config

Posted on by

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
pastedimage1670427440511v1.png

  • TarrasQ Profile Picture
    TarrasQ 39 on at
    CKEDITOR / Rich Text Editor CSS config
    Hi there,  thread resurrection time,
     
    I am about to embark on the same journey, more about fixing up the KA RTE editor to stop applying the Sticky Style.
     
    I see in your code 
    "stylesSet": "cw_styles:/WebResources/cw_styles",
    refences, the other code snippets. which seems simple enough.
     
    Did you work out the css issue, or any other helpful tips?

Helpful resources

Quick Links

Replay now available! Dynamics 365 Community Call (CRM Edition)

Catch up on the first D365 Community Call held on 7/10

Community Spotlight of the Month

Kudos to Saurav Dhyani!

Congratulations to the June Top 10 community leaders!

These stars go above and beyond . . .

Leaderboard

#1
André Arnaud de Calavon Profile Picture

André Arnaud de Cal... 287,914 Super User

#2
Martin Dráb Profile Picture

Martin Dráb 225,549 Super User

#3
nmaenpaa Profile Picture

nmaenpaa 101,148

Leaderboard

Featured topics

Product updates

Dynamics 365 release plans