Inline styles getting removed from span tag - Color and Font Picker | Community
Skip to main content
S
saurabh_kaushik
Level 2
January 10, 2022
Solved

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

  • January 10, 2022
  • 2 replies
  • 1596 views

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?

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by Vishalverma

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

2 replies

N
nathaliamra
January 10, 2022

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

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

    V
    Adobe Employee
    VishalvermaAdobe EmployeeAccepted solution
    Adobe Employee
    January 11, 2022

    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() {}
      S
      saurabh_kaushikAuthor
      Level 2
      January 11, 2022

      Thanks @vishalverma , it worked.

        Terms & ConditionsAccessibility statement

        Loading footer...