Ribbon API + DOM
Shape the editor ribbon
Use the supported API for ribbon state, then try small DOM changes that tailor the visible interface to your application.
Supported API
Control the ribbon state
Waiting for ribbon
DOM playground
Refine the interface
HTML + CSS
The ribbon is rendered as HTML. These reversible examples use its IDs and classes after ribbonTabsLoaded.
Ready to tryUse the controls above to interact with this demo.
What this demonstrates
Modify the RibbonBar
The Document Editor does not expose the ribbon’s internal content as a JavaScript object. It does expose the important state controls, while its HTML structure remains available for carefully scoped presentation and feature changes.
Key members
Minimize or expand
TXTextControl.ribbon.minimize / expand
Read or select a tab
TXTextControl.ribbon.selectedTab
Wait for ribbon content
ribbonTabsLoaded
How it works
Use TXTextControl.ribbon.minimize() and TXTextControl.ribbon.expand() when the application needs a compact or expanded editing surface. The selectedTab property reads the active tab and accepts supported names such as tabInsert and tabView.
For presentation-level changes, wait until ribbonTabsLoaded and then use DOM APIs. This demo highlights the Home tab, removes the Italic button, inserts a custom group before the Font group, and can remove the complete ribbon element. The injected Demo action displays a simple click message, while the reset action puts the DOM changes back.
TXTextControl.addEventListener("textControlLoaded", () => {
TXTextControl.addEventListener("ribbonTabsLoaded", () => {
TXTextControl.ribbon.minimize();
TXTextControl.ribbon.selectedTab = "tabInsert";
});
});
TXTextControl.addEventListener("ribbonTabsLoaded", () => {
document.getElementById("ribbonTabHome")?.classList.add("demo-ribbon-home-highlight");
document.getElementById("ribbonTabHome_btnItalic")?.remove();
document.getElementById("ribbonGroupFont")?.insertAdjacentHTML(
"beforebegin", customGroupHtml);
document.querySelector("#ribbonbar").style.display = "none";
});
NuGet packages
TXTextControl.TextControl.Core.SDK
34.0.4
Provides the core document model and server-side document processing APIs.
dotnet add package TXTextControl.TextControl.Core.SDK --version 34.0.4
Provides the browser-based TX Text Control document editor and JavaScript API.
dotnet add package TXTextControl.Web --version 34.4.0
TXTextControl.Web.DocumentEditor.Backend
34.4.0
Hosts the WebSocket-based backend used by the browser document editor.
dotnet add package TXTextControl.Web.DocumentEditor.Backend --version 34.4.0
Source files
See the implementation
The view, browser behavior, and controller are encapsulated in Demos/RichTextEditor/Customize/ModifyRibbon.
