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

AEM 6.3 SP2 - Replace <b> with <strong> and <i> with <em> in Rich Text Editor

Avatar

Level 2

Hi All,

I want to replace <b> with <strong> and <i> with <em> in rte in AEM 6.3 SP2. I already tried below solutions but no luck as they all are for AEM 6.1.

1. Experiencing Adobe Experience Manager - Day CQ: AEM 61 - Touch UI Rich Text Editor Remove Bold and A...

2. Overriding '/libs/clientlibs/granite/richtext/core/js/commands/DefaultFormatting.js' with <b> to <strong>

3. Adding 'semanticMarkupMap' node in rte for changing of <b> to <strong>.

Whenever i author rte in dialog, it changes <b> to <strong> but the moment i click ok or 'view Source', it changes back to <b>.

Can you please provide some inputs?

9 Replies

Avatar

Level 10

Did you follow this article exactly - enter all of the plug-in code?

Avatar

Level 10

Also - we are checking with the author to see if there is an updated version of this article.

Avatar

Level 2

Yeah i did all the steps but still was not able to see the new Strong plugin. Can you provide any package or newer version of article specific to AEM 6.3?

Avatar

Level 1

I've had luck with adding this as a sibling to the RTE dialog's <uiSettings> and <rtePlugins> nodes.

<htmlRules jcr:primaryType="nt:unstructured">
  <docType jcr:primaryType="nt:unstructured">
  <typeConfig jcr:primaryType="nt:unstructured"
   useSemanticMarkup="{Boolean}true">
  <semanticMarkupMap
   b="strong"
   i="em"/>
  </typeConfig>
  </docType>
</htmlRules>

Note that if text has already been authored with <b> and <i> tags you will need to go in and add a space somewhere in the rte editor to pick up the change and swap the tags.

Avatar

Level 2

Fedrick,

<semanticMarkupMap
   b="strong"
   i="em"/>

shouldn't it be

<typeConfig jcr:primaryType="nt:unstructured"

   useSemanticMarkup="{Boolean}true">

  <semanticMarkupMap jcr:primaryType="nt:unstructured"

   b="strong"

   i="em"/>

</typeConfig>

not sure, how without jcr:primaryType="nt:unstructured" we can enter the value.

Please clarify.. I tried it as a node, but still not working... Im on AEM 6.4

Avatar

Employee

I got the knowledge of this resolution from my colleague so I post the knowledge instead of my colleague.

The best practice is as follows in AEM6.4.

1. cq:editConfig

/apps/core/wcm/components/text/v2/text/cq:editConfig/cq:inplaceEditing/config/htmlRules/do cType/typeConfig

     @useSemanticMarkup [boolean] = true

/apps/core/wcm/components/text/v2/text/cq:editConfig/cq:inplaceEditing/config/htmlRules/d ocType/typeConfig/semanticMarkupMap

     @b [String] = "strong"

     @i [String] = "em"

RTE_1.png

2. cq:dialog

(a) Add a property "features" to rtePlugins/misctools node.

/apps/core/wcm/components/text/v2/text/cq:dialog/content/items/tabs/items/properties/items/columns/items/column/items/text/rtePlugins/misctools

     @features [String] = "*"

RTE_3.png

(b) Add misctools#sourceedit in "toolbar" properties of the below nodes.

/apps/core/wcm/components/text/v2/text/cq:dialog/content/items/tabs/items/properties/items/columns/items/column/items/text/uiSettings/cui/inline

/apps/core/wcm/components/text/v2/text/cq:dialog/content/items/tabs/items/properties/items/columns/items/column/items/text/uiSettings/cui/dialogFullScreen

RTE_4.png

(c) Create the following node structure and set properties same as "1. cq:editConfig".

/apps/core/wcm/components/text/v2/text/cq:dialog/content/items/tabs/items/properties/items/columns/items/column/items/text/htmlRules/docType/typeConfig

     @useSemanticMarkup [boolean] = true

/apps/core/wcm/components/text/v2/text/cq:editConfig/cq:inplaceEditing/config/htmlRules/d ocType/typeConfig/semanticMarkupMap

     @b [String] = "strong"

     @i [String] = "em"

Best,

Avatar

Level 2

Hi hibikik39369812​,

i tried the above said thing but i am not able to get strong or em tags , infact the bold and italic tags are vanished from my dialog. Is there any other way to do it?

regards,

Srikar.Y

Avatar

Community Advisor

Could you share screenshots/steps that you performed? Do you see any errors in console log?

What version of AEM do you use?

Avatar

Employee

Hi Srikar,

Which are you using the version of AEM?

I tried it on AEM6.4.

Best,

Hibiki

Avatar

Level 5

Hi,

In 6.5 SP4, I have tried all the mentioned solutions without having success. If anyone got a solution in 6.5 sp please put it here.

Avatar

Level 2

Hi @JakeCham ,

 

Can you pls try to refer/map the <htmlRules> node created to the respective RTE field in your dialog? because this helped me fix the issue in 6.5.

 

Let me know if it helps 🙂

 

<richTextContent
jcr:primaryType="nt:unstructured"
sling:resourceType="cq/gui/components/authoring/dialog/richtext"
fieldDescription="Enter content to be displayed"
fieldLabel="Rich text content"
name="./richTextContent"
useFixedInlineToolbar="{Boolean}true">
<rtePlugins
jcr:primaryType="nt:unstructured"
sling:resourceSuperType="/apps/<path to config>/rtePlugins"/>
<uiSettings
jcr:primaryType="nt:unstructured"
sling:resourceSuperType="/apps/<path to config>/uiSettings"/>
<htmlRules
jcr:primaryType="nt:unstructured"
sling:resourceSuperType="/apps/<path to config>/htmlRules"/>