Rich Text Editor - Swap <i> element for <em> | Community
Skip to main content
D
dorianhallward
Level 4
October 16, 2015
Solved

Rich Text Editor - Swap <i> element for <em>

  • October 16, 2015
  • 2 replies
  • 830 views

Using an OSX/Chrome combination, I have specified the html rules - for use by my custom Rich Text Editor in the snippet at the foot of this question.  I've also provided an overridden copy of DefaultFormatting.js and specified the elements to use as shown in the snippet at the foot of this question.  While bold text is marked-up as I'd like (as strong elements), italic elements are only specified as em elements 'temporarily'.

  1. First time I highlight some text in the RTE and click on italic, the markup produced is 
    <p><em>Some text</em></p>
  2. If i close the RTE but then re-open it, the mark-up is changed to the unwanted
    <p><i>Some text</i></p>

Is this a known issue or have I missed some additional configuration?

 

<htmlRules jcr:primaryType="nt:unstructured"> <docType jcr:primaryType="nt:unstructured"> <typeConfig jcr:primaryType="nt:unstructured"> <semanticMarkupMap jcr:primaryType="nt:unstructured" b="strong" em="em" i="em" strong="strong"/> </typeConfig> </docType> </htmlRules>
/** snippet from /apps/cq/ui/rte/core/commands/DefaultFormatting.js * @private */ _getTagNameForCommand: function(cmd) { var cmdLC = cmd.toLowerCase(); var tagName = null; switch (cmdLC) { case "bold": tagName = "strong"; break; case "italic": tagName = "em"; break; case "underline": tagName = "u"; break; case "subscript": tagName = "sub"; break; case "superscript": tagName = "sup"; break; } return tagName; },
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 smacdonald2008

Looks like the first time you use - it is using your overridden RTE (where you use em). Then it seems to use the one here:

/libs/cq/ui/rte/core/commands/DefaultFormatting.js

try making this small change in this file and see if it changes ( I typically do not like making changes under /libs. But this small change is minor.)

2 replies

smacdonald2008
smacdonald2008Accepted solution
Level 10
October 16, 2015

Looks like the first time you use - it is using your overridden RTE (where you use em). Then it seems to use the one here:

/libs/cq/ui/rte/core/commands/DefaultFormatting.js

try making this small change in this file and see if it changes ( I typically do not like making changes under /libs. But this small change is minor.)

D
dorianhallwardAuthor
Level 4
October 16, 2015

Thanks @smacdonald2008 but as you'll see in my question (and the snippets of code i included) I've already overridden ('overlayed') the file that you suggested.  The thing that has me stumped here is I have made almost identical changes for the italic markup produced by the RTE as I have for bold.  While replacing <b> tags with <strong> works correctly and consistently, providing <em> tags instead of <i> doesn't quite.  Note: getting the bold shortcut key functionality to work correctly in the RTE wasn't straightforward and revealed the bug discussed here.   

Terms & ConditionsAccessibility statement

Loading footer...