Inline styles getting removed from span tag - Color and Font Picker

[saurabhkaushik]

Hi All,

I am using a color and font picker in Rich Text component. The picker appends font-size, bgcolor, color and font-family as per the selection in a span tag.

E.g. <p><span style="font-size: 12px; font-family: Arial Black;">This s Test Content</span></p>

But as soon as I press any Key in my Rich Text dialog, styles get removed.

Investigating this I noticed that handleJunkSpans function inside KeyPlugin.js (loaded as part of richtext.js from /libs/clientlibs/granite/richtext ) is causing the issue and removing all styles if font-size is present.

if (com.isTag(toCheck, 'span')) {
var styleAttrib = com.getAttribute(toCheck, 'style', true);
if (styleAttrib) {
if (styleAttrib.indexOf('font-size') >= 0) {
var sel = CUI.rte.Selection;
var bkm = sel.createSelectionBookmark(context);
CUI.rte.DomProcessor.removeWithoutChildren(toCheck);
sel.selectBookmark(context, bkm);
}
}
}

Is there any way to stop this OOB validation using some property?

[nathaliamra]

Have a look at https://experienceleague.adobe.com/docs/experience-manager-65/developing/introduction/security.html?...

Adding the rules to the span tag in the antisamy config file may solve the issue

[Vishalverma · Accepted solution]

If you need to override handleJunkSpans function of KeyPlugin then in color/font picker JS file add logic something like below:

var rtePluginObj = CUI.rte.plugins;

rtePluginObj.KeyPlugin.prototype.handleJunkSpans = function() {}

[saurabhkaushik]

Thanks @Vishalverma , it worked.

[Farnain]

not working for me