RTE wrap text with <strong> tag when Bold icon is clicked | Community
Skip to main content
sreekalyanip
Level 3
Nov 29, 2018 9:29 AM UTC
Solved

RTE wrap text with <strong> tag when Bold icon is clicked

I have a requirement when the user clicks on Bold icon of the RTE then the text has to be wrapped with <strong> tag instead on <b>.

I tried using the solution from the link Experiencing Adobe Experience Manager - Day CQ: AEM 61 - Touch UI Rich Text Editor Remove Bold and Add Strong Plugin but i am not able to add the Strong plugin. From the solution able to remove the bold tag but not able to add Strong plugin.

I am using AEM 6.3 + Service pack 2. Any help in this regard.

I would like to overlay this solution and not confined to just one component so whenever a RTE is used and bold is clicked then the text should be wrapped with <strong> tag instead of <b> tag.

    This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
    Gaurav-Behl
    Gaurav-BehlAccepted solution
    Level 10
    Jan 17, 2019 3:01 PM UTC

    As mentioned above, use this link to install the custom package, it has step-by-step documentation to enable it -

    Experiencing Adobe Experience Manager - Day CQ: AEM 61 - Touch UI Rich Text Editor Remove Bold and Add Strong Plugin

    Modify the category to rte.coralui3 as you want to run it in 6.4

    HTH

    View reply

    9 replies

    Gaurav-Behl
    Gaurav-BehlAccepted solution
    Level 10
    Jan 17, 2019 3:01 PM UTC

    As mentioned above, use this link to install the custom package, it has step-by-step documentation to enable it -

    Experiencing Adobe Experience Manager - Day CQ: AEM 61 - Touch UI Rich Text Editor Remove Bold and Add Strong Plugin

    Modify the category to rte.coralui3 as you want to run it in 6.4

    HTH

    Translate
    srikary71884977
    Level 2
    Jan 17, 2019 2:38 PM UTC

    Hello Folks,

    I am using Aem 6.4 instance and i need to configure the RTE where i should see the <strong> tag instead of <b> and <em> tag instead of <i>. How can i achieve this?

    Solution for this would really help me.

    Many thanks in advance,

    Srikar.Y

    Translate
    sreekalyanipAuthor
    Level 3
    Nov 30, 2018 10:42 AM UTC

    Hi Vipin,

    If we overlay DefaultFormatting.js initially the tag <b> is getting replaced with strong. After saving and reopening the dialog again it is not possible anymore to remove the <strong>-Tags. So any suggestion to solve this.

    Thanks

    Translate
    vipins5188
    vipins5188
    Level 3
    Nov 30, 2018 4:40 AM UTC

    Thanks smacdonald2008​

    Translate
    smacdonald2008
    smacdonald2008
    Level 10
    Nov 30, 2018 4:35 AM UTC

    Nice response!

    Translate
      vipins5188
      vipins5188
      Level 3
      Nov 30, 2018 4:30 AM UTC

      Hi,

      One options is to create custom plugin ,add it on toolbar ,hide existing Bold plugin. For this you can refer the example given by smacdonald2008​ above.

      Another solutions is you overlay existing command for bold plugin and replace <b> with <strong>. For this you can overlay DefaultFormatting.js.

      Code you need to change is

      _getTagNameForCommand: function(cmd) {

              var cmdLC = cmd.toLowerCase();

              var tagName = null;

              switch (cmdLC) {

                  case "bold":

                      tagName = "b";  //Change this "b" with "strong"

                      break;

                  case "italic":

                      tagName = "i";

                      break;

                  case "underline":

                      tagName = "u";

                      break;

                  case "subscript":

                      tagName = "sub";

                      break;

                  case "superscript":

                      tagName = "sup";

                      break;

              }

              return tagName;

          },

      Hope this helps.

      Translate
        smacdonald2008
        smacdonald2008
        Level 10
        Nov 30, 2018 3:51 AM UTC

        There are examples on Sreekanth Choudry Nalabotu's blog on how to write plug-ins for RTE. For example - Experiencing Adobe Experience Manager - Day CQ: AEM 62 - TouchUI Dialog RTE (Mini RTE) To Upper Case Plugin

        Translate
        sreekalyanipAuthor
        Level 3
        Nov 29, 2018 11:09 AM UTC

        Hi Arun,

        In this case the resource super type for the text component has to be always text component from core. But if we use Text component from "general" then this solution does not apply.

        So basically want to have custom plugin in toolbar for RTE in 6.3 where it will wrap the text with <strong>.

        Translate
        arunpatidar
        arunpatidar
        New Participant
        Nov 29, 2018 10:39 AM UTC

        Hi,

        Please check AEM 6.3 SP2 - Replace &lt;b&gt; with &lt;strong&gt; and &lt;i&gt; with &lt;em&gt; in Rich Text Editor

        Translate
        Arun Patidar
        Terms & ConditionsAccessibility statement

        Loading footer...