概述
本 Demo 展示了如何集成和使用 SpreadJS 公式编辑器，演示了编辑器的核心功能及配置选项。Demo 中包含三个复杂公式示例：等级评定（根据分数返回 A-F 等级）、查找最频繁值和生成 GUID，展示了编辑器对复杂公式的格式化显示能力。
实现思路
初始化 Spread 工作簿，加载三个复杂公式到表格中
创建 FormulaEditor 实例，指定宿主 DOM 元素
使用 attach 方法将编辑器与工作簿绑定，实现数据同步
配置编辑器选项：formatWidthLimit（格式化宽度限制）和面板宽度
添加交互按钮：格式化按钮（重新格式化公式）和保存按钮（提交编辑内容到单元格）
代码解析
初始化公式编辑器
这段代码创建了公式编辑器实例并绑定到工作簿。new FormulaEditor() 接收一个 DOM 元素作为编辑器的容器，attach() 方法使编辑器能够自动显示当前活动单元格的公式内容，实现工作簿与编辑器之间的数据同步。
配置格式化宽度限制
通过设置 formatWidthLimit 选项控制公式的格式化宽度：
'auto'：根据 DOM 容器的宽度自动调整，避免一行宽度超过容器
数字值：当公式表达式长度超过指定值时调整宽度
-1：将公式格式化为多行
设置后调用 format() 方法重新格式化公式显示。
保存编辑内容
使用命令管理器执行 commitContentToActiveCell 命令，将编辑器中的内容保存到当前活动单元格。这种方式比直接操作单元格更加安全，支持撤销重做操作。
运行效果
左侧显示 SpreadJS 表格，右侧显示公式编辑器面板，初始比例为 64%:36%
点击表格中的公式单元格，编辑器自动显示格式化后的公式，支持语法高亮
通过下拉框选择不同的格式化宽度限制（Auto、-1、30、50、80、999），观察公式的显示效果变化
调整面板宽度数值（30-90），改变编辑器与表格的布局比例
点击「Format」按钮重新格式化当前公式
点击「Save」按钮将编辑器中的修改保存到单元格
API 参考
FormulaEditor 构造函数
host：HTMLElement - 宿主元素，编辑器的容器
options?：IFormulaEditorOptions - 编辑器配置选项
options 配置项
tabSize：number - 按 Tab 键时插入的空格数，默认为 4
formatWidthLimit：number | 'auto' - 格式化时的宽度限制，默认为 'auto'
主要方法
attach(workbook)：将编辑器绑定到工作簿
format()：格式化当前公式
refresh()：刷新编辑器显示
commandManager()：获取命令管理器，用于执行编辑器命令
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);
}
