Products Technologies Demo Docs Blog Support Company

Removing Complete Ribbon Tabs from the HTML5 Web Editor

The HTML5-based Web editor comes with a ready-to-use, fully featured ribbon bar for all commonly used features and formatting options of TX Text Control. A typical use case for the HTML5 document editor is creating reporting templates. The reporting features are included in the ribbon tab Reports. If you don't want to provide those features to your end-users, you can remove buttons, groups or complete tabs from the ribbon bar. This blog entry shows how to remove such elements using the…

Removing Complete Ribbon Tabs from the HTML5 Web Editor

The HTML5-based Web editor comes with a ready-to-use, fully featured ribbon bar for all commonly used features and formatting options of TX Text Control.

Removing complete ribbon tabs from the HTML5 Web editor

A typical use case for the HTML5 document editor is creating reporting templates. The reporting features are included in the ribbon tab Reports. If you don't want to provide those features to your end-users, you can remove buttons, groups or complete tabs from the ribbon bar. This blog entry shows how to remove such elements using the available CSS file.

In order to remove complete tabs, you can simply use CSS in order to set the Display property of those elements to None:

display: none !important;

The ribbon bar consists of 6 ribbon tabs whereas the first tab is the File menu and not really a tab:

Ribbon tab CSS name
File menu #tabFile
Home #ribbonTabHome, #tabDefault
Insert #tabInsert
Page Layout #tabPageLayout
Reports #tabReports
View #tabView

In order to remove the Reports ribbon tab, uncomment the display property in the CSS file provided in the above mentioned article:

#tabReports {
    display: none !important;
}

After this setting, the Reports tab is not displayed including all groups and buttons:

Removing complete ribbon tabs from the HTML5 Web editor

As this is pure client-side CSS, ribbon tabs, groups and buttons can be removed using CSS or Javascript at run-time.

Stay in the loop!

Subscribe to the newsletter to receive the latest updates.

Related Posts

ASP.NETDocumentViewerHTML5

Creating an ASP.NET MVC DocumentViewer Application With Razor

Create a simple ASP.NET (MVC) application that uses the HTML5 document viewer.


ASP.NETHTML5Razor

Creating an ASP.NET MVC Application With Razor

This tutorial shows how to integrate TextControl.Web into an MVC application with Razor.


ASP.NETReportingHTML5

Creating Your First ASP.NET Reporting Application

This tutorial shows how to use the MailMerge component in an ASP.NET Web application to merge a template with data to create an Adobe PDF document.


ASP.NETAjaxHTML5

Creating an ASP.NET Web Forms AJAX Application

This tutorial shows how to use the HTML5 based TextControl to create a Web based word processor and template designer. Using the built-in File menu, you can load and save documents from and to a…


AzureHTML5MVC

Using an Azure Load Balancer with Web.TextControl

LOB (line of business) applications are often deployed with a Load Balancer that distributes incoming traffic to healthy virtual machines or cloud services. When deploying an application, that…