公式编辑器提供了一个高级的编辑环境，用于创建、编辑和理解公式。其核心功能包括：
语法高亮：通过对公式中不同语法元素进行标记，提高可读性和可用性。
格式化器：自动调整公式的缩进、间距、换行等，使公式更易读和易于维护。
智能感知：提供公式自动完成、函数参数提示等功能，提高编写公式的效率。
语法检查：对公式进行语法和错误检查，减少错误和漏洞，并提供错误提示。
主题：提供多个主题，并允许自定义主题以改变编辑器的外观。
示例
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 name="spreadjs culture" content="zh-cn" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css"
href="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets/dist/gc.spread.sheets.all.min.js"
type="text/javascript"></script>
<script
src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-formula-panel/dist/gc.spread.sheets.formulapanel.min.js"
type="text/javascript"></script>
<script
src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-resources-zh/dist/gc.spread.sheets.resources.zh.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);
}
