Overview

The formula editor provides an advanced formula editing environment that makes it easy to create, edit and understand formulas, with many options that let you customize the experience.

The formula editor provides an advanced editing environment for creating, editing, and understanding formulas. Its core features include: Syntax Highlighting: Enhances readability and usability by marking up different syntax elements in the formula. Formatter: Automatically adjusts the formula indentation, spacing, line breaks, etc. to make the formula more readable and maintainable. IntelliSense: Provides formula auto-completion, function parameter hints, etc. to improve efficiency of writing formulas. Lint: Performs syntax and error checking on the formula to reduce errors and vulnerabilities, and provides error prompts. Theme: Provides multiple Themes and allows customizing Themes to change the appearance of the editor. Example
window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {sheetCount: 2}); initSpread(spread); }; function initSpread(spread) { initData(spread); let editor = new GC.Spread.Sheets.FormulaPanel.FormulaEditor(document.querySelector('.editor-container')); editor.attach(spread); document.querySelector('.format-width-limit').addEventListener('change', (e) => { let value = e.target.value; editor.options.formatWidthLimit = value === 'auto' ? value : parseInt(value); editor.format(); }); document.querySelector('.panel-width').addEventListener('change', (e) => { let v = +e.target.value; v = Math.max(30, Math.min(90, v)); document.querySelector('.formula-panel').style.width = v + "%"; document.querySelector('.spread-container').style.width = 100 - v + "%"; spread.refresh(); editor.refresh(); editor.format(); }); document.querySelector('.format').addEventListener('click', (e) => { editor.format(); }); document.querySelector('.save').addEventListener('click', (e) => { editor.commandManager().execute({ cmd: 'commitContentToActiveCell' }) }); } function initData (spread) { spread.suspendPaint(); spread.options.allowDynamicArray = true; var sheet = spread.sheets[0]; sheet.setValue(0, 0, 'Grade'); sheet.setValue(0, 6, 72); sheet.setFormula(0, 1, '=LET(score, G1, IF(score >= 90, "A", IF(score >= 80, "B", IF(score >= 70, "C", IF(score >= 60, "D", "F")))))'); sheet.setValue(1, 0, 'Most Frequent'); sheet.setArray(1, 6, [[1, 2, 6, 6, 6, 5]]); sheet.setFormula(1, 1, '=LET(data, G2:L2, unique_data, UNIQUE(data), count_data, COUNTIF(data, unique_data), max_count, MAX(count_data), most_frequent, INDEX(unique_data, MATCH(max_count, count_data, 0)), IF(max_count > 1, most_frequent, ""))'); sheet.setValue(2, 0, 'GUID'); sheet.setFormula(2, 1, '=CONCATENATE(DEC2HEX(RANDBETWEEN(0, 4294967295), 8), "-", DEC2HEX(RANDBETWEEN(0, 65535), 4), "-", DEC2HEX(RANDBETWEEN(16384, 20479), 4), "-", DEC2HEX(RANDBETWEEN(32768, 49151), 4), "-", DEC2HEX(RANDBETWEEN(0, 65535), 4), DEC2HEX(RANDBETWEEN(0, 4294967295), 8))'); sheet.setActiveCell(0, 1); sheet.setColumnWidth(0, 100); spread.resumePaint(); }
<!doctype html> <html style="height:100%;font-size:14px;"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets-formula-panel/dist/gc.spread.sheets.formulapanel.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script> <script src="app.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <div class="sample-tutorial"> <div id="ss" class="spread-container"></div> <div class="formula-panel"> <div class="buttons"> <label>Format Width Limit:</label> <select class="format-width-limit"> <option value="auto">Auto</option> <option value="-1">-1</option> <option value="30">30</option> <option value="50">50</option> <option value="80">80</option> <option value="999">999</option> </select> <label class="panel-width-label">Panel Width:<input class="panel-width" type="number" min="30" max="90" value="36" style="width: 40px;"></label> <button class="format">Format</button> <button class="save">Save</button> </div> <div class="editor-container"></div> </div> </div> </body> </html>
body { position: absolute; margin: 0; top: 0; bottom: 0; left: 0; right: 0; } .sample-tutorial { position: relative; height: 100%; display: flex; flex-direction: row; overflow: hidden; } .spread-container { width: 64%; height: 100%; vertical-align: top; } .formula-panel { width: 36%; height: 100%; display: flex; flex-direction: column; } .formula-panel .buttons { display: flex; flex-direction: row; flex-wrap: wrap; padding-right: 125px; position: relative; border-bottom: 1px solid black; height: 22px; } .panel-width-label { position: absolute; right: 0px; } .panel-width { width: 40px; } .formula-panel .editor-container { height: calc(100% - 22px); }