In recent blog entries, we explained how to add custom buttons or ribbon groups to the ribbon bar. This article shows how to add complete ribbon tabs to the existing ribbon bar of Web.TextControl.

Basically, the way to add a ribbon tab to the ribbon bar is the same like adding buttons or ribbon groups: The HTML DOM is changed dynamically after the ribbon has been completely loaded.

The following Javascript code is all you need to add the new ribbon tab with a button in a ribbon group. The ribbonTabsLoaded event is fired after the ribbon has been completely loaded. In this event handler, the new tab is added before the View tab. The tab content ribbonTabCustom is added to the txRibbonTabContentContainer which is basically the container for all ribbon tab content pages.

<script type="text/javascript">

    // elements can be only added when the ribbon is completely loaded
    TXTextControl.addEventListener("ribbonTabsLoaded", function (e) {
        addTab();
    });

    // this function adds a new tab and the tab content page
    function addTab() {
        sCustomTab = "<li><a onclick=\'activateCustomTab();\' id=\'tabCustom\' data-applicationmodes=\'0\' tabindex=\'-1\' href=\'#!\'>Custom Ribbon Tab</a></li>";

        // add the new tab after the \'View\' tab
        document.getElementById(\'tabView\').parentElement.insertAdjacentHTML(
            \'beforebegin\', sCustomTab);

        sCustomTabContent = "<div id=\'ribbonTabCustom\' class=\'tab-content\' style=\'display: none;\'>";
        sCustomTabContent += "<div id=\'ribbonGroupCustom\' class=\'ribbon-group\'>";
        sCustomTabContent += "  <div class=\'ribbon-group-content\'>";
        sCustomTabContent += "      <div class=\'ribbon-group-content-row\'>";
        sCustomTabContent += "          <div class=\'ribbon-group-button-group\'>";
        sCustomTabContent += "              <div onclick=\'BtnCustomAction()\' id=\'BtnCustom\' class=\'ribbon-button ribbon-button-big\' title=\'Custom\'>";
        sCustomTabContent += "                  <div class=\'ribbon-button-big-image-container\'><img id=\'imgID_RibbonTabInsert_html_0\' class=\'ribbon-button-big-image\' src=\'custom.png\'></img></div>";
        sCustomTabContent += "                  <div class=\'ribbon-button-big-label-container\'><p class=\'ribbon-button-label\'>Custom</p></div>";
        sCustomTabContent += "              </div>";
        sCustomTabContent += "          </div>";
        sCustomTabContent += "      </div>";
        sCustomTabContent += "  </div>";

        sCustomTabContent += "  <div class=\'ribbon-group-label-container\'>";
        sCustomTabContent += "      <p class=\'ribbon-group-label\'>Custom</p>";
        sCustomTabContent += "  </div>";
        sCustomTabContent += "</div>";
        sCustomTabContent += "</div>";

        // add the tab content to the tab content container
        document.getElementById(\'txRibbonTabContentContainer\').insertAdjacentHTML(
            \'afterbegin\', sCustomTabContent);
    }

</script>

The activateCustomTab is called when the new tab page is clicked. This function is deactivating all active tabs in order to activate the newly added tab page.

function activateCustomTab() {
    $(\'div.tab-content\').css("display", "none");
    $(\'ul.tabs a\').removeClass("selected");

    $("#ribbonTabCustom").css("display", "inline-block");
    $("#tabCustom").addClass("selected");
}

Download the sample from GitHub and test it on your own.