Focused editing
Format with a smaller toolbar
This editor replaces the full ribbon with only the controls needed for everyday writing. Select text, place the caret, and use the toolbar directly above the document.
Live font listThe font menu is filled from TXTextControl.getSupportedFonts, so it reflects the fonts available to this editor session.
Ready to tryUse the controls above to interact with this demo.
What this demonstrates
Minimal Editor Toolbar
A custom toolbar can provide a calmer editing experience while still using the TX Text Control JavaScript API for real document formatting.
Key members
Load available fonts
TXTextControl.getSupportedFonts
Format selected text
TXTextControl.selection.setBold / setItalic
Format at the caret
TXTextControl.inputFormat.setFontFamily
Apply lists and styles
TXTextControl.inputFormat.setBulletedList / Selection.setFormattingStyle
Reflect the current input position
TXTextControl.inputFormat.addEventListener
How it works
After textControlLoaded, the demo asks TXTextControl.getSupportedFonts for the current font list and fills the custom select element. Font and size changes are sent to the selection when text is selected, while the input format keeps the caret ready for the next characters.
Bold, italic, underline, lists, and alignment use TXTextControl.inputFormat, which changes the paragraph or the next text at the current input position. The predefined style menu uses styles already contained in the document.
The toolbar also listens for boldChanged, fontFamilyChanged, centeredChanged, and related InputFormat events. This keeps the visual state accurate when the caret moves between differently formatted paragraphs or when the document changes through another editor surface.
The ribbon is hidden only after ribbonTabsLoaded. The editor remains the same TX Text Control instance; only the surrounding chrome has been replaced by an application-owned toolbar.
TXTextControl.inputFormat.addEventListener("boldChanged", event => {
boldButton.setAttribute("aria-pressed", event.newValue);
});
TXTextControl.getSupportedFonts(fonts => {
fonts.forEach(font => addFontOption(font));
}, showError);
TXTextControl.addEventListener("ribbonTabsLoaded", () => {
document.querySelector("#ribbonbar").style.display = "none";
});
TXTextControl.selection.setBold(true, refreshToolbar, showError);
TXTextControl.selection.setItalic(true, refreshToolbar, showError);
TXTextControl.inputFormat.setBulletedList(true, refreshToolbar, showError);
TXTextControl.selection.setFormattingStyle("Heading 1", refreshToolbar, showError);
