Expand my Community achievements bar.

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?

18 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

Level 10

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 6

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"/>

 

Avatar

Level 2

Hi pandian, 
Can you elaborate on the 

sling:resourceSuperType="/apps/<path to config>/htmlRules"/>

Which path to config here? 

Avatar

Level 2

Hi @Nirmal_Kumar1,

Normally you would have a path in which you would have configured the RTE settings, for example pls see the first screenshot from @hibikik74610607 . So that path of that node should be mapped to the RTE field separately for rtePlugins, uiSettings and htmlRules. Hope this helps.

Avatar

Level 2

This fix worked, but it failed in situations like
<strong style="color:green">, where strong is changed to b but it omitted the style and class used inside it.
This happened for all cases whether it is changed from

  • strong to b
  • b to strong
  • b to b
  • strong to strong, the class and style used inside have been lost.

So working on a solution to fix this.

Avatar

Level 2

Thanks for the update, good to hear that it is working, and pls post if you are able to sort out the color stuff. Unfortunately I didn't try that.