Microsoft Dynamics 365 | Integration, Dataverse...

Rich text editor default style "stickyStyle" not working as expected

(0) Share

Report

Posted on by Kevin Shen

160

Hi,

I have a rich text editor field in D365 CE form.

I tried to set the configuration of the editor.

According to Microsoft official forum, in stickyStyle, I can set any css I want to set as default. However I found that except font-size and font-family, all other css properties are not working.

In my case I tried color and margin, but none of them will be initialised in the html.

Just wondering how could I set default css apart from font-size and font-family?

Any idea will be appreciated.

Thanks

I have the same question (0)

All responses (2)

Answers (0)

Suggested answer

Nya 29,060 on at

Like (0)

Report

RE: Rich text editor default style "stickyStyle" not working as expected

Hi, Kevin

There is a description about the stickyStyle in the following document, which refers that the values of stickyStyle can be set for both font_size and font_family. And it says email only recognizes changes in the following configuration values.

Configure the default email font in customer engagement apps | Microsoft Docs

Only two documentations which mentions stickyStyle can be found in the Docs of Microsoft but the two are not in agreement.

So I have tried to edit the CSS with a default color inserted.

The font-size and font-family could take effect normally, which proves that there is nothing wrong with the CSS itself, only that it does not recognize the color.

It can also be searched in the Console but cannot be recognized by the field.

So it is recommended to change the color of the text by using the Text Color tool.

If this helped you, I'd appreciate it if you'd mark this as a Verified Answer, which may in turn help others as well.

Best Regards,

Nya

Was this reply helpful? Yes No
Suggested answer

Wahaj Rashid 11,321 on at

Like (0)

Report
RE: Rich text editor default style "stickyStyle" not working as expected

Hi,

Thank you for your query.

Seems like stickyStyle is only implemented for font-size and font-family.

I found the stickyStyle plugin JS code, and it clearly shows only font-size and font-family is wrapped:

/** * @fileOverview Handles default styling functionality. Provides a wrapping div with configurable styles that wraps all content inside the editor body. Enforcing default * fonts, font sizes, etc even when users successively hit backspace, which previously would delete all defaults from the body. * example configuration parameter: config.stickyStyle = { 'font-size': '12px', 'font-family': "'Segoe UI','Helvetica Neue',sans-serif" } */ CKEDITOR.plugins.stickystyles = { init: function (editor) { var stickyStyleObject = editor.config.stickyStyle || { 'font-size': '9pt', 'font-family': "'Segoe UI','Helvetica Neue',sans-serif" }; editor.on('instanceReady', function () { editor.on("change", function (ev) { var innerBody = ev.editor.document.getBody(); var firstChild = innerBody.getFirst(); if (!firstChild || firstChild.$.nodeName != ev.editor.config.stickyStyles_defaultTag.toUpperCase() || !firstChild.$.attributes['data-wrapper']) { editor.fire("lockSnapshot"); const snapShotCount = editor.undoManager.snapshots.length; var selection = editor.getSelection(); var bookmarks = selection.createBookmarks(true); var wrapperDivElement = new CKEDITOR.dom.element(ev.editor.config.stickyStyles_defaultTag); wrapperDivElement.setAttribute('data-wrapper', 'true'); wrapperDivElement.$.setAttribute("style", "font-size:" stickyStyleObject["font-size"] ";font-family:" stickyStyleObject["font-family"] ";"); innerBody.moveChildren(wrapperDivElement); innerBody.append(wrapperDivElement); var range = selection.getRanges()[0]; if (range) { range.moveToBookmark(bookmarks[0]); range.select(); } setTimeout(function () { editor.fire("unlockSnapshot"); if (snapShotCount < editor.undoManager.snapshots.length) { editor.fire("updateSnapshot"); } }, 0); } }); }); editor.on('contentDom', function (event) { CKEDITOR.addCss('[data-wrapper="true"] {margin:0; padding:0}body{font-size:' stickyStyleObject["font-size"] '; font-family: ' stickyStyleObject["font-family"] ';}'); }); } }; CKEDITOR.plugins.add('stickystyles', CKEDITOR.plugins.stickystyles);

Maybe this will be enhanced in a future release.

Was this reply helpful? Yes No