Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

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

Avatar

Level 2

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?

1 Accepted Solution

Avatar

Correct answer by
Employee

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() {}

View solution in original post

4 Replies

Avatar

Correct answer by
Employee

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() {}