Wijmo Ribbon (React)

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.

This example uses React.

import 'bootstrap.css'; import "@grapecity/wijmo.styles/wijmo.css"; import './app.css'; import * as React from 'react'; import * as ReactDOM from 'react-dom'; import { TabPanel, Tab } from '@grapecity/wijmo.react.nav'; import * as wijmo from '@grapecity/wijmo'; import { ComboBox, ColorPicker } from '@grapecity/wijmo.react.input'; class App extends React.Component { constructor(props) { super(props); this.handleButtonClick = (e) => { switch (e.target.id) { // format group case 'save': localStorage.editorContent = this.editorEl.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.id); break; // font group case 'bold': case 'italic': case 'underline': case 'strikethrough': case 'subscript': case 'superscript': this.execCommand(e.target.id); break; case 'click-me': alert('Wijmo Ribbon Sample'); } }; this.showBkgPicker = e => { this.showPicker(ReactDOM.findDOMNode(this.bkgPicker.current), e); }; this.showClrPicker = e => { this.showPicker(ReactDOM.findDOMNode(this.clrPicker.current), e); }; this.showPicker = (pickerComponent, e) => { wijmo.showPopup(pickerComponent, e.target, false, true, false); pickerComponent.focus(); }; this.bkgChanged = colorPicker => { this.execCommand('backColor', colorPicker.value); this.hideColorPicker(colorPicker); }; this.clrChanged = colorPicker => { this.execCommand('foreColor', colorPicker.value); this.hideColorPicker(colorPicker); }; this.fontChanged = comboBox => { this.execCommand('fontName', comboBox.text); }; this.sizeChanged = comboBox => { this.execCommand('fontSize', comboBox.selectedIndex + 1); }; this.execCommand = (cmd, parm = null) => { this.editorEl.focus(); document.execCommand(cmd, false, parm); }; this.state = { content: ` <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. `, }; this.ribbon = React.createRef(); this.editor = React.createRef(); this.clrPicker = React.createRef(); this.bkgPicker = React.createRef(); } componentDidMount() { if (localStorage.editorContent) { this.setState({ content: localStorage.editorContent }); } const ribbon = this.ribbon.current; if (ribbon) { const ribbonEl = this.ribbonEl = ReactDOM.findDOMNode(ribbon); if (ribbonEl) { // handle button clicks ribbonEl.addEventListener('click', this.handleButtonClick); // hide/show buttons ribbonEl.querySelector('.wj-tabheaders').addEventListener('dblclick', e => { if (!wijmo.hasClass(e.target, 'wj-tabheader')) { wijmo.toggleClass(ribbonEl, 'hide-content'); } }); // show tooltips const tt = new wijmo.Tooltip(); const els = ribbonEl.querySelectorAll('[aria-label]'); for (let i = 0; i < els.length; i++) { tt.setTooltip(els[i], els[i].getAttribute('aria-label')); } } } const editorEl = this.editorEl = this.editor.current; if (editorEl) { // save/restore editor selection on focus changes editorEl.addEventListener('keyup', () => this.selection = this.saveSelection()); editorEl.addEventListener('mouseup', () => this.selection = this.saveSelection()); editorEl.addEventListener('focus', () => this.restoreSelection(this.selection)); } } saveSelection() { const sel = window.getSelection(); return sel && sel.rangeCount ? sel.getRangeAt(0) : null; } restoreSelection(range) { if (range) { const sel = window.getSelection(); sel.removeAllRanges(); sel.addRange(range); } } hideColorPicker(colorPicker) { wijmo.hidePopup(colorPicker.hostElement); } render() { return (<div> <TabPanel ref={this.ribbon}> <Tab> <a>Format</a> <div> <div className="wj-group"> <div className="wj-content"> <div className="wj-column"> <button id="save" className="wj-btn wj-btn-large"> <i className="material-icons">save</i> <br /> Save </button> </div> <div className="wj-column"> <div className="wj-row"> <button id="undo" className="wj-btn" aria-label="Undo"> <i className="material-icons">undo</i> </button> <button id="redo" className="wj-btn" aria-label="Redo"> <i className="material-icons">redo</i> </button> <button id="preview" className="wj-btn" aria-label="Preview"> <i className="material-icons">pageview</i> </button> <button id="removeFormat" className="wj-btn" aria-label="Remove Format"> <i className="material-icons">format_clear</i> </button> </div> <div className="wj-row"> <button id="cut" className="wj-btn" aria-label="Cut"> <i className="material-icons">&#x2702;</i> </button> <button id="copy" className="wj-btn" aria-label="Copy"> <i className="material-icons">&#xE14D;</i> </button> <button id="paste" className="wj-btn" aria-label="Paste"> <i className="material-icons">&#xE85D;</i> </button> <button id="selectAll" className="wj-btn" aria-label="Select All"> <i className="material-icons">select_all</i> </button> </div> </div> </div> <div className="wj-header">Actions</div> </div> <div className="wj-group"> <div className="wj-content"> <div className="wj-row"> <ComboBox id="fontFace" aria-label="Font Face" itemsSource={['Arial', 'Courier New', 'Garamond', 'Tahoma', 'Times', 'Verdana', 'WingDings']} textChanged={this.fontChanged}/> <ComboBox id="fontSize" aria-label="Font Size" itemsSource={['Very Small', 'Smaller', 'Small', 'Medium', 'Large', 'Larger', 'Very Large']} selectedIndex={3} textChanged={this.sizeChanged}/> <ColorPicker ref={this.bkgPicker} style={{ display: 'none' }} valueChanged={this.bkgChanged} lostFocus={this.hideColorPicker}/> <button id="background" className="wj-btn" aria-label="Background Color" onClick={this.showBkgPicker}> <i className="material-icons">format_color_fill</i> </button> <ColorPicker ref={this.clrPicker} style={{ display: 'none' }} valueChanged={this.clrChanged} lostFocus={this.hideColorPicker}/> <button id="color" className="wj-btn" aria-label="Text Color" onClick={this.showClrPicker}> <i className="material-icons">format_color_text</i> </button> </div> <div className="wj-row"> <button id="bold" className="wj-btn" aria-label="Bold"> <i className="material-icons">format_bold</i> </button> <button id="italic" className="wj-btn" aria-label="Italic"> <i className="material-icons">format_italic</i> </button> <button id="underline" className="wj-btn" aria-label="Underline"> <i className="material-icons">format_underline</i> </button> <button id="strikethrough" className="wj-btn" aria-label="Strikethrough"> <i className="material-icons">format_strikethrough</i> </button> <button id="subscript" className="wj-btn" aria-label="Subscript"> <i className="material-icons">vertical_align_bottom</i> </button> <button id="superscript" className="wj-btn" aria-label="Superscript"> <i className="material-icons">vertical_align_top</i> </button> </div> </div> <div className="wj-header">Font</div> </div> </div> </Tab> <Tab> <a>Custom Tab</a> <div> <div className="wj-group"> <div className="wj-content"> <div className="wj-column"> <button id="click-me" className="wj-btn wj-btn-large"> Click Me </button> </div> </div> <div className="wj-header">Custom Group</div> </div> </div> </Tab> </TabPanel> <div className='editor' ref={this.editor} contentEditable dangerouslySetInnerHTML={{ __html: this.state.content }}/> </div>); } } ReactDOM.render(<App />, document.getElementById('app'));
<!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 id="app"></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; }
(function (global) { System.config({ transpiler: 'plugin-babel', babelOptions: { es2015: true, react: true }, meta: { '*.css': { loader: 'css' } }, paths: { // paths serve as alias 'npm:': 'node_modules/' }, // map tells the System loader where to look for things map: { 'jszip': 'npm:jszip/dist/jszip.js', '@grapecity/wijmo': 'npm:@grapecity/wijmo/index.js', '@grapecity/wijmo.input': 'npm:@grapecity/wijmo.input/index.js', '@grapecity/wijmo.styles': 'npm:@grapecity/wijmo.styles', '@grapecity/wijmo.cultures': 'npm:@grapecity/wijmo.cultures', '@grapecity/wijmo.chart': 'npm:@grapecity/wijmo.chart/index.js', '@grapecity/wijmo.chart.analytics': 'npm:@grapecity/wijmo.chart.analytics/index.js', '@grapecity/wijmo.chart.animation': 'npm:@grapecity/wijmo.chart.animation/index.js', '@grapecity/wijmo.chart.annotation': 'npm:@grapecity/wijmo.chart.annotation/index.js', '@grapecity/wijmo.chart.finance': 'npm:@grapecity/wijmo.chart.finance/index.js', '@grapecity/wijmo.chart.finance.analytics': 'npm:@grapecity/wijmo.chart.finance.analytics/index.js', '@grapecity/wijmo.chart.hierarchical': 'npm:@grapecity/wijmo.chart.hierarchical/index.js', '@grapecity/wijmo.chart.interaction': 'npm:@grapecity/wijmo.chart.interaction/index.js', '@grapecity/wijmo.chart.radar': 'npm:@grapecity/wijmo.chart.radar/index.js', '@grapecity/wijmo.chart.render': 'npm:@grapecity/wijmo.chart.render/index.js', '@grapecity/wijmo.chart.webgl': 'npm:@grapecity/wijmo.chart.webgl/index.js', '@grapecity/wijmo.gauge': 'npm:@grapecity/wijmo.gauge/index.js', '@grapecity/wijmo.grid': 'npm:@grapecity/wijmo.grid/index.js', '@grapecity/wijmo.grid.detail': 'npm:@grapecity/wijmo.grid.detail/index.js', '@grapecity/wijmo.grid.filter': 'npm:@grapecity/wijmo.grid.filter/index.js', '@grapecity/wijmo.grid.search': 'npm:@grapecity/wijmo.grid.search/index.js', '@grapecity/wijmo.grid.grouppanel': 'npm:@grapecity/wijmo.grid.grouppanel/index.js', '@grapecity/wijmo.grid.multirow': 'npm:@grapecity/wijmo.grid.multirow/index.js', '@grapecity/wijmo.grid.transposed': 'npm:@grapecity/wijmo.grid.transposed/index.js', '@grapecity/wijmo.grid.pdf': 'npm:@grapecity/wijmo.grid.pdf/index.js', '@grapecity/wijmo.grid.sheet': 'npm:@grapecity/wijmo.grid.sheet/index.js', '@grapecity/wijmo.grid.xlsx': 'npm:@grapecity/wijmo.grid.xlsx/index.js', '@grapecity/wijmo.grid.selector': 'npm:@grapecity/wijmo.grid.selector/index.js', '@grapecity/wijmo.grid.cellmaker': 'npm:@grapecity/wijmo.grid.cellmaker/index.js', '@grapecity/wijmo.grid.immutable': 'npm:@grapecity/wijmo.grid.immutable/index.js', '@grapecity/wijmo.touch': 'npm:@grapecity/wijmo.touch/index.js', '@grapecity/wijmo.cloud': 'npm:@grapecity/wijmo.cloud/index.js', '@grapecity/wijmo.nav': 'npm:@grapecity/wijmo.nav/index.js', '@grapecity/wijmo.odata': 'npm:@grapecity/wijmo.odata/index.js', '@grapecity/wijmo.olap': 'npm:@grapecity/wijmo.olap/index.js', '@grapecity/wijmo.pdf': 'npm:@grapecity/wijmo.pdf/index.js', '@grapecity/wijmo.viewer': 'npm:@grapecity/wijmo.viewer/index.js', '@grapecity/wijmo.xlsx': 'npm:@grapecity/wijmo.xlsx/index.js', '@grapecity/wijmo.undo': 'npm:@grapecity/wijmo.undo/index.js', '@grapecity/wijmo.interop.grid': 'npm:@grapecity/wijmo.interop.grid/index.js', "@grapecity/wijmo.react.chart.analytics": "npm:@grapecity/wijmo.react.chart.analytics/index.js", "@grapecity/wijmo.react.chart.animation": "npm:@grapecity/wijmo.react.chart.animation/index.js", "@grapecity/wijmo.react.chart.annotation": "npm:@grapecity/wijmo.react.chart.annotation/index.js", "@grapecity/wijmo.react.chart.finance.analytics": "npm:@grapecity/wijmo.react.chart.finance.analytics/index.js", "@grapecity/wijmo.react.chart.finance": "npm:@grapecity/wijmo.react.chart.finance/index.js", "@grapecity/wijmo.react.chart.hierarchical": "npm:@grapecity/wijmo.react.chart.hierarchical/index.js", "@grapecity/wijmo.react.chart.interaction": "npm:@grapecity/wijmo.react.chart.interaction/index.js", "@grapecity/wijmo.react.chart.radar": "npm:@grapecity/wijmo.react.chart.radar/index.js", "@grapecity/wijmo.react.chart": "npm:@grapecity/wijmo.react.chart/index.js", "@grapecity/wijmo.react.core": "npm:@grapecity/wijmo.react.core/index.js", "@grapecity/wijmo.react.gauge": "npm:@grapecity/wijmo.react.gauge/index.js", "@grapecity/wijmo.react.grid.detail": "npm:@grapecity/wijmo.react.grid.detail/index.js", "@grapecity/wijmo.react.grid.filter": "npm:@grapecity/wijmo.react.grid.filter/index.js", "@grapecity/wijmo.react.grid.grouppanel": "npm:@grapecity/wijmo.react.grid.grouppanel/index.js", '@grapecity/wijmo.react.grid.search': 'npm:@grapecity/wijmo.react.grid.search/index.js', "@grapecity/wijmo.react.grid.multirow": "npm:@grapecity/wijmo.react.grid.multirow/index.js", "@grapecity/wijmo.react.grid.sheet": "npm:@grapecity/wijmo.react.grid.sheet/index.js", '@grapecity/wijmo.react.grid.transposed': 'npm:@grapecity/wijmo.react.grid.transposed/index.js', '@grapecity/wijmo.react.grid.immutable': 'npm:@grapecity/wijmo.react.grid.immutable/index.js', "@grapecity/wijmo.react.grid": "npm:@grapecity/wijmo.react.grid/index.js", "@grapecity/wijmo.react.input": "npm:@grapecity/wijmo.react.input/index.js", "@grapecity/wijmo.react.olap": "npm:@grapecity/wijmo.react.olap/index.js", "@grapecity/wijmo.react.viewer": "npm:@grapecity/wijmo.react.viewer/index.js", "@grapecity/wijmo.react.nav": "npm:@grapecity/wijmo.react.nav/index.js", "@grapecity/wijmo.react.base": "npm:@grapecity/wijmo.react.base/index.js", 'jszip': 'npm:jszip/dist/jszip.js', 'react': 'npm:react/umd/react.production.min.js', 'react-dom': 'npm:react-dom/umd/react-dom.production.min.js', 'redux': 'npm:redux/dist/redux.min.js', 'react-redux': 'npm:react-redux/dist/react-redux.min.js', 'bootstrap.css': 'npm:bootstrap/dist/css/bootstrap.min.css', 'css': 'npm:systemjs-plugin-css/css.js', 'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js', 'systemjs-babel-build':'npm:systemjs-plugin-babel/systemjs-babel-browser.js' }, // packages tells the System loader how to load when no filename and/or no extension packages: { src: { defaultExtension: 'jsx' }, "node_modules": { defaultExtension: 'js' }, } }); })(this);