External Ribbon
The Bootstrap Rich Text Editor provides a UI experience similar to Microsoft Word Online. It fully integrates the Bootstrap Ribbon control, allowing you to create intuitive and easy-to-use word processing apps in the shortest possible time.
This demo illustrates the ribbon-based UI modes available within the Rich Text Editor. Based upon the RibbonMode property setting, Rich Text Editor can use either a built-in ribbon, a built-in one-line toolbar, an external ribbon control, or no ribbon. The RibbonMode property values include:
- Ribbon – The Rich Text Editor uses a built-in ribbon; ribbon tabs can be customized using the Rich Text Editor's RibbonTabs collection.
- One Line Ribbon – The Rich Text Editor displays a built-in ribbon used in one-line mode optimized for touch devices; one-line mode related settings can be defined for ribbon groups and ribbon galleries with their
OneLineModeSettings properties.
- ExternalRibbon – The Rich Text Editor uses an external Bootstrap Ribbon control, specified by the AssociatedRibbonID property. Ribbon tabs can be customized at the Ribbon control level with the Tabs property. The Rich Text Editor's CreateDefaultRibbonTabs method can be used to automatically populate the external ribbon with the default ribbon tabs.
- None – The Rich Text Editor does not incorporate or use the ribbon UI.
- Auto – The Rich Text Editor automatically displays a proper built-in ribbon depending upon the client browser type; a standard ribbon is used under desktop browsers and a one-line ribbon is used under the browsers of touch devices.
Give the demo a try and see how the Rich Text Editor looks and behaves with the external ribbon applied.
<dx:BootstrapRibbon ID="RibbonExternal" runat="server" ShowFileTab="false">
<CssClasses Control="mb-2" />
</dx:BootstrapRibbon>
<dx:BootstrapRichEdit runat="server" ActiveTabIndex="0" Height="500px" ShowConfirmOnLosingChanges="False"
RibbonMode="ExternalRibbon" AssociatedRibbonID="RibbonExternal">
</dx:BootstrapRichEdit>