Wijmo Ribbon

Wijmo 5 does not include a Ribbon control, but you can create ribbons easily using the TabPanel control and the controls in Wijmo's input module.

This example shows how you can build a simple text editor with a custom ribbon.

The ribbon element is a TabPanel. The tab pages contain groups of controls arranged in rows and columns. Controls in the groups use Material Icons, and have tooltips created automatically based on the aria-label attribute assigned to each control.

You can toggle the ribbon content visibility by double-clicking the empty area beside the tab headers.

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; // import * as wjCore from '@grapecity/wijmo'; import * as wjInput from '@grapecity/wijmo.input'; import * as wjNav from '@grapecity/wijmo.nav'; // document.readyState === 'complete' ? init() : window.onload = init; // function init() { // initialize editor element let editor = document.querySelector('#editor'); execCommand('styleWithCSS', true); // if (localStorage.editorContent) { editor.innerHTML = localStorage.editorContent; } // // create ribbon let ribbon = new wjNav.TabPanel('#ribbon'); addTooltips(ribbon); // // toggle ribbon content visibility on double-clicks, restore on clicks document.querySelector('.wj-tabheaders').addEventListener('dblclick', e => { if (!wjCore.hasClass(e.target, 'wj-tabheader')) { wjCore.toggleClass(ribbon.hostElement, 'hide-content'); } }); document.querySelector('.wj-tabheaders').addEventListener('click', e => { if (wjCore.hasClass(e.target, 'wj-tabheader')) { wjCore.toggleClass(ribbon.hostElement, 'hide-content', false); } }); // // populate combos let fontFace = new wjInput.ComboBox('#font-face', { itemsSource: ['Arial', 'Courier New', 'Garamond', 'Tahoma', 'Times', 'Verdana', 'WingDings'], textChanged: (sender) => execCommand('fontName', sender.text) }); let fontSize = new wjInput.ComboBox('#font-size', { itemsSource: ['Very Small', 'Smaller', 'Small', 'Medium', 'Large', 'Larger', 'Very Large'], selectedIndex: 3, textChanged: (sender) => execCommand('fontSize', sender.selectedIndex + 1) }); // // set up color pickers let clrBack = createColorPicker(sender => execCommand('backColor', sender.value)); document.querySelector('#background').addEventListener('click', e => { wjCore.showPopup(clrBack.hostElement, e.target, false, true, false); clrBack.focus(); }); // let clrFore = createColorPicker(sender => execCommand('foreColor', sender.value)); document.querySelector('#color').addEventListener('click', e => { wjCore.showPopup(clrFore.hostElement, e.target, false, true, false); clrFore.focus(); }); // // execute commands ribbon.hostElement.addEventListener('click', e => { switch (e.target.id) { // format group case 'save': localStorage.editorContent = editor.innerHTML; alert('Document Saved to Local Storage.'); break; case 'undo': case 'redo': case 'preview': case 'removeFormat': case 'cut': case 'copy': case 'paste': case 'selectAll': execCommand(e.target.id); break; // // font group case 'bold': case 'italic': case 'underline': case 'strikethrough': case 'subscript': case 'superscript': execCommand(e.target.id); break; // case 'click-me': alert('Wijmo Ribbon Sample'); } }); // // execute editor commands function execCommand(cmd, parm) { editor.focus(); document.execCommand(cmd, false, parm); } // // save/restore editor selection on focus changes let selection = null; editor.addEventListener('keyup', () => selection = saveSelection()); editor.addEventListener('mouseup', () => selection = saveSelection()); editor.addEventListener('focus', () => restoreSelection(selection)); // function saveSelection() { let sel = window.getSelection(); return sel && sel.rangeCount ? sel.getRangeAt(0) : null; } // function restoreSelection(range) { if (range) { let sel = window.getSelection(); sel.removeAllRanges(); sel.addRange(range); } } // // add tooltips based on the element's aria-label attribute function addTooltips(ctl) { let tt = new wjCore.Tooltip(); let els = ctl.hostElement.querySelectorAll('[aria-label]'); for (let i = 0; i < els.length; i++) { tt.setTooltip(els[i], els[i].getAttribute('aria-label')); } } // // create an auto-hiding color picker control function createColorPicker(valueChanged) { // create color picker let host = wjCore.createElement('<div class="wj-dropdown-panel"></div>'); let picker = new wjInput.ColorPicker(host, { lostFocus: function (s) { wjCore.hidePopup(s.hostElement); } }); // // apply color and close picker on clicks host.addEventListener('click', function () { wjCore.hidePopup(host); valueChanged(picker); }); // // done return picker; } } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo TabPanel Ribbon</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app'); </script> </head> <body> <div class="container-fluid"> <div id="ribbon"> <!-- Format tab --> <div> <div>Format</div> <div> <div class="wj-group"> <div class="wj-content"> <div class="wj-column"> <button id="save" class="wj-btn wj-btn-large"> <i class="material-icons">save</i> <br /> Save </button> </div> <div class="wj-column"> <div class="wj-row"> <button id="undo" class="wj-btn" aria-label="Undo"> <i class="material-icons">undo</i> </button> <button id="redo" class="wj-btn" aria-label="Redo"> <i class="material-icons">redo</i> </button> <button id="preview" class="wj-btn" aria-label="Preview"> <i class="material-icons">pageview</i> </button> <button id="removeFormat" class="wj-btn" aria-label="Remove Format"> <i class="material-icons">format_clear</i> </button> </div> <div class="wj-row"> <button id="cut" class="wj-btn" aria-label="Cut"> <i class="material-icons">&#x2702;</i> </button> <button id="copy" class="wj-btn" aria-label="Copy"> <i class="material-icons">&#xE14D;</i> </button> <button id="paste" class="wj-btn" aria-label="Paste"> <i class="material-icons">&#xE85D;</i> </button> <button id="selectAll" class="wj-btn" aria-label="Select All"> <i class="material-icons">select_all</i> </button> </div> </div> </div> <div class="wj-header">Actions</div> </div> <div class="wj-group"> <div class="wj-content"> <div class="wj-row"> <div id="font-face" aria-label="Font Face"></div> <div id="font-size" aria-label="Font Size"></div> <button id="background" class="wj-btn" aria-label="Background Color"> <i class="material-icons">format_color_fill</i> </button> <button id="color" class="wj-btn" aria-label="Text Color"> <i class="material-icons">format_color_text</i> </button> </div> <div class="wj-row"> <button id="bold" class="wj-btn" aria-label="Bold"> <i class="material-icons">format_bold</i> </button> <button id="italic" class="wj-btn" aria-label="Italic"> <i class="material-icons">format_italic</i> </button> <button id="underline" class="wj-btn" aria-label="Underline"> <i class="material-icons">format_underline</i> </button> <button id="strikethrough" class="wj-btn" aria-label="Strikethrough"> <i class="material-icons">format_strikethrough</i> </button> <button id="subscript" class="wj-btn" aria-label="Subscript"> <i class="material-icons">vertical_align_bottom</i> </button> <button id="superscript" class="wj-btn" aria-label="Superscript"> <i class="material-icons">vertical_align_top</i> </button> </div> </div> <div class="wj-header">Font</div> </div> </div> </div> <!-- Custom Tab --> <div> <div>Custom Tab</div> <div> <div class="wj-group"> <div class="wj-content"> <div class="wj-column"> <button id="click-me" class="wj-btn wj-btn-large"> Click Me </button> </div> </div> <div class="wj-header">Custom Group</div> </div> </div> </div> </div> <div id="editor" contenteditable="true"> <b>Lorem Ipsum</b> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </div> </div> </body> </html> @import url('https://fonts.googleapis.com/icon?family=Material+Icons'); .wj-tabpane { white-space: nowrap; /* keep groups on a single line */ } .wj-group { display: inline-block; border-right: 1px solid #eee; padding: 3px 6px 0 3px; } .wj-group >.wj-header { text-align: center; background: transparent; font-weight: normal; font-size: 80%; margin-top: 6px; } .wj-group >.wj-content { border: none; height: 5.5em; overflow: visible; } .wj-group .wj-column { display: inline-block; vertical-align: top; } .wj-group .wj-row { margin-bottom: 2px; } .wj-control .wj-group .wj-content .wj-btn { font-weight: normal; padding: 5px 12px; } .wj-group .wj-content .wj-btn.wj-btn-large { padding: 2em 1.5em; } .wj-group .material-icons { font-size: 110%; padding-top: 2px; pointer-events: none; } .wj-group .wj-dropdown { width: 10em; border: none; background: #eee; } /* hide ribbon content */ .wj-tabpanel.hide-content .wj-tabpanes { height: 0; transition: height linear 400ms; } #editor { height: 300px; overflow: auto; padding: 12px; background: #ffe; border: 1px solid #ccc; } body { margin-bottom: 36pt; } import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; // import * as wijmo from '@grapecity/wijmo'; import * as input from '@grapecity/wijmo.input'; import * as nav from '@grapecity/wijmo.nav'; // import { Component, enableProdMode, NgModule, ElementRef, ViewChild, AfterViewInit } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { BrowserModule } from '@angular/platform-browser'; import { WjNavModule } from '@grapecity/wijmo.angular2.nav'; import { WjInputModule } from '@grapecity/wijmo.angular2.input'; // @Component({ selector: 'app-component', templateUrl: 'src/app.component.html' }) export class AppComponent implements AfterViewInit { @ViewChild('ribbon') private _ribbon: nav.TabPanel; @ViewChild('editor') private _editor: ElementRef; private _selection: Range; // ngAfterViewInit() { this.execCommand('styleWithCSS', true); // if (localStorage.editorContent) { this._editor.nativeElement.innerHTML = localStorage.editorContent; } // // toggle ribbon content visibility on double-clicks, restore on clicks document.querySelector('.wj-tabheaders').addEventListener('dblclick', e => { if (!wijmo.hasClass(e.target as Element, 'wj-tabheader')) { wijmo.toggleClass(this._ribbon.hostElement, 'hide-content'); } }); document.querySelector('.wj-tabheaders').addEventListener('click', e => { if (wijmo.hasClass(e.target as Element, 'wj-tabheader')) { wijmo.toggleClass(this._ribbon.hostElement, 'hide-content', false); } }); // this._addTooltips(this._ribbon); // // save/restore editor selection on focus changes this._editor.nativeElement.addEventListener('keyup', () => this._selection = this._saveSelection()); this._editor.nativeElement.addEventListener('mouseup', () => this._selection = this._saveSelection()); this._editor.nativeElement.addEventListener('focus', () => this._restoreSelection(this._selection)); } // // execute editor commands execCommand(cmd: string, parm?: any) { this._editor.nativeElement.focus(); document.execCommand(cmd, false, parm); } // showPicker(picker: input.ColorPicker, e: Event) { wijmo.showPopup(picker.hostElement, e.target, false, true, false); picker.focus(); } hidePicker(picker: input.ColorPicker) { wijmo.hidePopup(picker.hostElement); } // onTabPanelClick(e: Event) { switch ((e.target as HTMLElement).id) { // format group case 'save': localStorage.editorContent = this._editor.nativeElement.innerHTML; alert('Document Saved to Local Storage.'); break; case 'undo': case 'redo': case 'preview': case 'removeFormat': case 'cut': case 'copy': case 'paste': case 'selectAll': this.execCommand((e.target as HTMLElement).id); break; // // font group case 'bold': case 'italic': case 'underline': case 'strikethrough': case 'subscript': case 'superscript': this.execCommand((e.target as HTMLElement).id); break; // case 'click-me': alert('Wijmo Ribbon Sample'); } } // private _addTooltips(ctl: nav.TabPanel) { let tt = new wijmo.Tooltip(); let els = ctl.hostElement.querySelectorAll('[aria-label]'); for (let i = 0; i < els.length; i++) { tt.setTooltip(els[i], els[i].getAttribute('aria-label')); } } // private _saveSelection() { let sel: Selection = window.getSelection(); return sel && sel.rangeCount ? sel.getRangeAt(0) : null; } // private _restoreSelection(range: Range) { if (range) { let sel = window.getSelection(); sel.removeAllRanges(); sel.addRange(range); } } } // @NgModule({ imports: [WjNavModule, WjInputModule, BrowserModule], declarations: [AppComponent], bootstrap: [AppComponent] }) export class AppModule { } // enableProdMode(); // Bootstrap application with hash style navigation and global services. platformBrowserDynamic().bootstrapModule(AppModule); <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo TabPanel Ribbon</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Polyfills --> <script src="node_modules/core-js/client/shim.min.js"></script> <script src="node_modules/zone.js/dist/zone.min.js"></script> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.js"></script> <script src="systemjs.config.js"></script> <script> // workaround to load 'rxjs/operators' from the rxjs bundle System.import('rxjs').then(function (m) { System.set(SystemJS.resolveSync('rxjs/operators'), System.newModule(m.operators)); System.import('./src/app.component'); }); </script> </head> <body> <app-component></app-component> </body> </html> <div class="container-fluid"> <wj-tab-panel #ribbon (click)="onTabPanelClick($event)"> <wj-tab> <a>Format</a> <div> <div class="wj-group"> <div class="wj-content"> <div class="wj-column"> <button id="save" class="wj-btn wj-btn-large"> <i class="material-icons">save</i> <br /> Save </button> </div> <div class="wj-column"> <div class="wj-row"> <button id="undo" class="wj-btn" aria-label="Undo"> <i class="material-icons">undo</i> </button> <button id="redo" class="wj-btn" aria-label="Redo"> <i class="material-icons">redo</i> </button> <button id="preview" class="wj-btn" aria-label="Preview"> <i class="material-icons">pageview</i> </button> <button id="removeFormat" class="wj-btn" aria-label="Remove Format"> <i class="material-icons">format_clear</i> </button> </div> <div class="wj-row"> <button id="cut" class="wj-btn" aria-label="Cut"> <i class="material-icons">&#x2702;</i> </button> <button id="copy" class="wj-btn" aria-label="Copy"> <i class="material-icons">&#xE14D;</i> </button> <button id="paste" class="wj-btn" aria-label="Paste"> <i class="material-icons">&#xE85D;</i> </button> <button id="selectAll" class="wj-btn" aria-label="Select All"> <i class="material-icons">select_all</i> </button> </div> </div> </div> <div class="wj-header">Actions</div> </div> <div class="wj-group"> <div class="wj-content"> <div class="wj-row"> <wj-combo-box #fontFace aria-label="Font Face" [itemsSource]="['Arial', 'Courier New', 'Garamond', 'Tahoma', 'Times', 'Verdana', 'WingDings']" (textChanged)="execCommand('fontName', fontFace.text)"></wj-combo-box> <wj-combo-box #fontSize aria-label="Font Size" [itemsSource]="['Very Small', 'Smaller', 'Small', 'Medium', 'Large', 'Larger', 'Very Large']" [selectedIndex]="3" (textChanged)="execCommand('fontSize', fontSize.selectedIndex + 1)"> </wj-combo-box> <wj-color-picker #bkgPicker style="display: none" (valueChanged)="execCommand('backColor', bkgPicker.value); hidePicker(bkgPicker);" (lostFocus)="hidePicker(bkgPicker)"></wj-color-picker> <button id="background" class="wj-btn" aria-label="Background Color" (click)="showPicker(bkgPicker, $event)"> <i class="material-icons">format_color_fill</i> </button> <wj-color-picker #clrPicker style="display: none" (valueChanged)="execCommand('foreColor', clrPicker.value); hidePicker(clrPicker);" (lostFocus)="hidePicker(clrPicker)"></wj-color-picker> <button id="color" class="wj-btn" aria-label="Text Color" (click)="showPicker(clrPicker, $event)"> <i class="material-icons">format_color_text</i> </button> </div> <div class="wj-row"> <button id="bold" class="wj-btn" aria-label="Bold"> <i class="material-icons">format_bold</i> </button> <button id="italic" class="wj-btn" aria-label="Italic"> <i class="material-icons">format_italic</i> </button> <button id="underline" class="wj-btn" aria-label="Underline"> <i class="material-icons">format_underline</i> </button> <button id="strikethrough" class="wj-btn" aria-label="Strikethrough"> <i class="material-icons">format_strikethrough</i> </button> <button id="subscript" class="wj-btn" aria-label="Subscript"> <i class="material-icons">vertical_align_bottom</i> </button> <button id="superscript" class="wj-btn" aria-label="Superscript"> <i class="material-icons">vertical_align_top</i> </button> </div> </div> <div class="wj-header">Font</div> </div> </div> </wj-tab> <wj-tab> <a>Custom Tab</a> <div> <div class="wj-group"> <div class="wj-content"> <div class="wj-column"> <button id="click-me" class="wj-btn wj-btn-large"> Click Me </button> </div> </div> <div class="wj-header">Custom Group</div> </div> </div> </wj-tab> </wj-tab-panel> <div #editor id="editor" contenteditable="true"> <b>Lorem Ipsum</b> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </div> </div> @import url('https://fonts.googleapis.com/icon?family=Material+Icons'); .wj-tabpane { white-space: nowrap; /* keep groups on a single line */ } .wj-group { display: inline-block; border-right: 1px solid #eee; padding: 3px 6px 0 3px; } .wj-group >.wj-header { text-align: center; background: transparent; font-weight: normal; font-size: 80%; margin-top: 6px; } .wj-group >.wj-content { border: none; height: 5.5em; overflow: visible; } .wj-group .wj-column { display: inline-block; vertical-align: top; } .wj-group .wj-row { margin-bottom: 2px; } .wj-control .wj-group .wj-content .wj-btn { font-weight: normal; padding: 5px 12px; } .wj-group .wj-content .wj-btn.wj-btn-large { padding: 2em 1.5em; } .wj-group .material-icons { font-size: 110%; padding-top: 2px; pointer-events: none; } .wj-group .wj-dropdown { width: 10em; border: none; background: #eee; } /* hide ribbon content */ .wj-tabpanel.hide-content .wj-tabpanes { height: 0; transition: height linear 400ms; } .wj-btn, .wj-combobox { margin-right: 3px; } #editor { height: 300px; overflow: auto; padding: 12px; background: #ffe; border: 1px solid #ccc; } body { margin-bottom: 36pt; }