HTML5 Web Editor - Customize Toolbars

Web.TextControl provides client-side methods to show and hide the various toolbars including the vertical and horizontal ruler bars, the status bar and the ribbon bar.

To provide client-side, Javascript applications, those methods are available as Javascript methods and can be adjusted without any server requests. Additionally, the ribbon bar can be collapsed and expanded programmatically.

Demo



When you remove the ribbon tabs which is shown in the 'Customize Ribbon' sample, the menu entries are not visible when collapsing the ribbon bar.

Sources

<script type="text/javascript">

	// client-side Javascript events

	TXTextControl.addEventListener('ribbonTabsLoaded', function (e) {
		TXTextControl.showRibbonBar(false);
		TXTextControl.showStatusBar(false);
		TXTextControl.showVerticalRuler(false);
		TXTextControl.showHorizontalRuler(false);

		document.getElementById('verticalRuler').checked = false;
		document.getElementById('horizontalRuler').checked = false;
		document.getElementById('statusBar').checked = false;
		document.getElementById('ribbonBar').checked = false;
	});

	function toggleVerticalRuler() {
		TXTextControl.showVerticalRuler(document.getElementById('verticalRuler').checked);
	}

	function toggleHorizontalRuler() {
		TXTextControl.showHorizontalRuler(document.getElementById('horizontalRuler').checked);
	}

	function toggleStatusBar() {
		TXTextControl.showStatusBar(document.getElementById('statusBar').checked);
	}

	function toggleRibbonBar() {
		TXTextControl.showRibbonBar(document.getElementById('ribbonBar').checked);
	}

</script>

HTML5 Web editor