公式编辑器

长而复杂的公式在狭窄的公式栏或单个单元格框中很难查看和编辑。因此，公式编辑器允许您以多行显示并缩进长而复杂的公式，以便于阅读和编辑。

SpreadJS提供了这个功能作为一个插件，它依赖于 gc.spread.sheets.formulapanel.x.x.x.min.js 脚本文件。

因此，您需要在应用程序中包含这个脚本文件来使用公式编辑器面板。为了使工作簿与公式编辑器面板同步工作，您需要使用 attach() 方法将它们绑定在一起。

以下代码示例将工作簿绑定到公式编辑器面板。

let workbook = new GC.Spread.Sheets.Workbook("spread-host");
let formulaEditor = new GC.Spread.Sheets.FormulaPanel.FormulaEditor("formula-editor-host");
formulaEditor.options.formatWidthLimit = -1;
formulaEditor.options.tabSize = 4;
formulaEditor.attach(workbook);
......
<!--DOM element-->
<div id="spread-host" style="width:100%; height:250px;border: 1px solid gray;"></div>
<div id="formula-editor-host" style="width:100%; height:300px;border: 1px solid gray;"></div>

公式编辑器提供了**formatWidthLimit**选项，可以根据所选择的限制来更改公式文本的宽度。可用的值如下：

此外，**tabSize**选项用于在按下Tab键时在公式表达式之前插入制表符空格。

要开始使用公式编辑器，请按照下图所示选择要编辑的包含公式的单元格。

主要特点

公式编辑器的主要特点如下：

• 格式化：调整公式的缩进、间距、换行等，使公式更易读、易于维护。

  
  

• 自动补全建议：提供公式自动补全、函数参数提示等功能，提高编写公式的效率。在输入公式时，它会智能地提供可用的函数、自定义名称、枚举参数等建议。

  
  

• 灵活的大纲视图：允许在公式编辑器中折叠和展开公式视图。

  
  

• 语法高亮：通过突出显示公式中的不同语法元素，提升可读性和可用性。

  
  

• Lint选项：提供错误提示，如不正确的函数参数、括号不匹配等，以减少错误。

  
  

• 工具提示信息：当用户悬停或输入函数时，显示包含有关函数详细信息的工具提示。

  
  

• 主题定制：提供多个主题，并允许自定义现有主题以改变编辑器的外观。

  
  

// Define the color of the function token
.gc-formula-editor-token-function {
 color: blue;
}

// Define the color of the string token
.gc-formula-editor-token-const-string {
  color: red;
}

// Define the color, background-color, and font of the formula editor
.gc-formula-editor-content {
color: black;
background-color: white;
font: 16px, sans-serif;
}

使用设计器

要在Spread 设计器中开始使用公式编辑器，请选择包含要编辑的公式的单元格，然后单击 FORMULAS > Formulas Auditing 选项卡组中的显示公式编辑器按钮。公式编辑器允许您选择在面板上如何显示您的公式。您可以编辑公式视图和公式文本。使用保存按钮可以保存编辑后的公式。保存后，SpreadJS会自动将编辑器中的文本同步到单元格中。您还可以使用editor.commandManager API进行异步操作。此外，格式化按钮可用于获取应用公式的格式树视图，并更改公式宽度和制表符大小限制。

以下GIF展示了SpreadJS设计器中的公式编辑器面板。

快捷键

在使用公式编辑器格式化公式时，您可以使用以下快捷键。