Change Bold and Italic Buttons to Strong and Emphasize Buttons In Aloha

This article describes how to change the bold and italic buttons in the Aloha Editor to strong and emphasize for HTML5 purposes.

This solution has been tested on version 9.10 SP1 and works with standard HTML content items and SmartForm rich area fields.

Note: This was tested by the support team, but has not undergone product testing by our engineering team as of yet. 

1. Open \Workarea\FrameworkUI\js\Ektron\Controls\EktronUI\Editor\Aloha\plugins\ektron\general\lib\general-plugin.js
2. Find the following line: 

   $(document).on('TidyUpToolbarButtons', function () {
   

3. Inside the curly braces replace the 2 lines of code with the following so the function looks like the following:

   $(document).on('TidyUpToolbarButtons', function () {
       //$ektron('button[title="Strong"]').hide();
       //$ektron('button[title="Emphasize"]').hide();
       $ektron('button[title="Strong"]').show();
       $ektron($ektron('button[title="Strong"]').children()[0]).css('background-position', '0,0');
       $ektron('button[title="Emphasize"]').show();
       $ektron($ektron('button[title="Emphasize"]').children()[0]).css('background-position', '0,0');
       $ektron('button[title="Bold"]').hide();
       $ektron('button[title="Italic"]').hide();
   });
   

4. Next search for the following line and replace the code as shown below.

   $(document).on('InsertSpanButton', function () {
   

5. Replace the function code so it looks like below:

   $(document).on('InsertSpanButton', function () {
       //$ektron('button[title="Strong"]').hide();
       //$ektron('button[title="Emphasize"]').hide();
       $ektron('button[title="Strong"]').show();
       $ektron($ektron('button[title="Strong"]').children()[0]).css('background-position', '0,0');
       $ektron('button[title="Emphasize"]').show();
       $ektron($ektron('button[title="Emphasize"]').children()[0]).css('background-position', '0,0');
       $ektron('button[title="Bold"]').hide()
       $ektron('button[title="Italic"]').hide()
       var jH1LargeButton = $ektron('span.aloha-large-icon-h1').parent('button'),
       jFirstBlock = $ektron('div.aloha-ui-component-group:first');
       if (jH1LargeButton.length > 0 && 1 == jFirstBlock.children().length) {
           $ektron(_toggleSpanButton.element).addClass('aloha-large-button');
           jH1LargeButton.before(_toggleSpanButton.element);
           jFirstBlock.remove();
       }
   });    
   

6. Save the file and clear your browser cache and reload the Workarea.
7. To fix rich areas to allow for these tags do the following:
   • If in 91SP1
     1. Navigate to: \Workarea\Foundation\RadControls\Editor\Scripts\radeditor.js
     2. Search for strong (3 times) should bring you to approx. line 326 where you should see the following code:                         

        var newContent=content.replace(m_reStrongTag,"\x3cb$1>").replace(/\x3c\x2f\x73\x74\x72\x6f\x6e\x67\x3e/gi,"\x3c/b>"); newContent=newContent.replace(m_reEmTag,"\x3c\x69$1>").replace(/\x3c\x2f\x65\x6d\x3e/gi,"\074/\x69\x3e"); return newContent; }
        

     3. Replace the code with:

        var newContent = content; /*content.replace(m_reStrongTag,"\x3cb$1>").replace(/\x3c\x2f\x73\x74\x72\x6f\x6e\x67\x3e/gi,"\x3c/b>"); newContent=newContent.replace(m_reEmTag,"\x3c\x69$1>").replace(/\x3c\x2f\x65\x6d\x3e/gi,"\074/\x69\x3e");*/ return newContent; }
        

     4. Save the file and clear your browser cache and reload the workarea.
   • If in 91SP2+ versions
     1. Navigate to: \Workarea\Foundation\RadControls\Editor\Scripts\radeditor.js.
     2. Find the following code

            this.GetDesignContent = function (content)
        
            {        
        
        var newContent = content.replace(m_reStrongTag, "").replace(/<\ strong>/ig, "");
        
        newContent = newContent.replace(m_reEmTag, "").replace(/<\ em>/ig, "");              
        
                  return newContent;
        
            };

     3. Change them to:

            this.GetDesignContent = function (content)
        
            {        
        
        //var newContent = content.replace(m_reStrongTag, "").replace(/<\ strong>/ig, "");
        
        //newContent = newContent.replace(m_reEmTag, "").replace(/<\ em>/ig, "");              
        
                  return content; //note changed line
        
            };

8. Save the changes, clear the browser cache and reload the Workarea.