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.