Ribbon and UI
Users should find the functions they need in the Document Editor, including functions of your own application. For that, you adapt the ribbon, the context menus and the language in which the editor shows them to your application.
You can remove built-in tabs and buttons, add tabs and context menu items that call your code and show the editor in your users' language.
How the User Interface Is Built
The user interface of the editor runs in the browser, but its content comes from the server:
- The ribbon groups the functions of the editor in tabs. It consists of HTML elements and CSS in the page, which are loaded from the server when the editor starts. The JavaScript API selects tabs and minimizes the ribbon; to remove or add elements, your code changes the HTML of the ribbon.
- The context menus open when users right-click into the document. Before a menu opens, the editor raises the
contextMenuOpeningevent, whose handler changes the items of the menu. - The texts of the ribbon and the dialog boxes come from string resources on the server. The UI culture, set when the editor is created, selects their language.
The ribbons and context menus of the editor on the Core engine were changed in version 34.0. If your application customizes them, test the customizations after an upgrade.
Showing or hiding the complete ribbon bar, the rulers and the status bar is described in Viewing and Printing.
Find the Right Page
| If you want to | Read |
|---|---|
| Select or minimize the ribbon, remove built-in elements or configure the sidebar toggle button | Ribbon |
| Turn context menus off, add items that call your code or change built-in items | Context Menus |
| Add a tab of your own, or a group with your buttons to a built-in tab | Custom Tabs |
| Show the editor in another language, or format dates for a culture | Localization |
Where to Start
- Ribbon: how the ribbon is built and when your code may change it.
- Custom Tabs or Context Menus: add the functions of your application.
- Localization: when your users work in another language.
The pages rely on the events of the editor and on its JavaScript API, described in Events and JavaScript API.
Pages in This Section
- Ribbon: select, minimize and expand the ribbon and remove its tabs, groups and buttons.
- Context Menus: customize the menus that open on a right-click.
- Custom Tabs: add tabs, groups and buttons of your own.
- Localization: set the UI culture and the culture of the editor.