Vue2低代码平台实战：如何用formulajs和codemirror打造高效公式编辑器

Vue2低代码平台实战：如何用formulajs和codemirror打造高效公式编辑器

最近在搭建一个面向业务人员的低代码平台，其中一个高频需求让我印象深刻：用户希望能在配置表单时，像使用Excel一样，通过公式动态计算某些字段的值。比如，一个“订单总价”字段，需要自动根据“单价”和“数量”计算得出。这个需求听起来简单，但要在Web端实现一个体验流畅、功能强大且易于集成的公式编辑器，却需要一番精巧的设计。

对于前端开发者而言，这不仅仅是塞一个输入框那么简单。它涉及到公式的编辑体验（高亮、提示、补全）、公式的解析与计算（需要一个可靠的函数库），以及与低代码平台数据流的无缝集成（动态监听、实时计算）。经过一番技术选型和实战打磨，我最终基于Vue2，整合了formulajs和codemirror，构建了一套相对完整的解决方案。今天，我就把这个过程中的核心思路、关键实现和踩过的“坑”分享出来，希望能给正在或即将面临类似需求的同行一些启发。

1. 核心需求拆解与技术选型

在动手写代码之前，我们必须先明确要解决的核心问题。一个低代码平台中的公式编辑器，其本质是一个领域特定语言（DSL）的编辑器。用户在这里编写的不是通用编程语言，而是由字段变量和特定函数组成的表达式。因此，我们的设计需要围绕这个核心展开。

核心需求可以归纳为三点：

1. 直观的编辑体验：用户需要清晰的语法高亮（区分函数、变量、字符串、数字）、智能提示（输入函数名或字段名时给出建议）、以及错误标记（公式语法错误时能直观提示）。
2. 强大的计算能力：必须支持一套丰富且可靠的函数库，最好能与用户熟悉的Excel函数对齐，降低学习成本。同时，要能正确解析和计算包含嵌套函数、字段引用的复杂表达式。
3. 无缝的平台集成：公式需要能引用平台中其他表单字段的值。当这些被引用的字段值发生变化时，公式计算结果必须能自动、实时地更新，形成响应式的数据流。

基于这些需求，我进行了如下技术选型：

• 公式计算引擎：formulajs 这是一个将Excel函数移植到JavaScript中的开源库。它支持超过400个函数，涵盖了数学、统计、文本、逻辑、日期等几乎所有Excel常用函数。其API设计简洁，直接对字符串表达式进行求值，完美契合我们的需求。更重要的是，它的计算结果与Excel高度一致，这对于追求“零学习成本”的业务用户来说至关重要。

• 代码编辑器核心：CodeMirror 这是一个功能强大的、可嵌入的代码编辑器组件。它提供了代码高亮、行号、缩进指南、自动补全、括号匹配等专业编辑器功能，并且拥有极高的可定制性。社区生态丰富，有各种语言模式和插件。选择它来作为我们公式编辑器的“壳”，可以让我们专注于业务逻辑（公式的DSL），而无需从头造轮子。

• Vue2集成：vue-codemirror 这是一个将CodeMirror封装为Vue组件的库，大大简化了在Vue项目中的集成步骤。需要注意的是，由于项目基于Vue2，必须选择兼容的版本（如文中提到的4.0.6）。Vue3项目则需要寻找对应的Vue3版本或使用其他方案。

提示：技术选型时，除了功能，务必关注库的维护状态、社区活跃度以及与你项目技术栈的兼容性。formulajs和CodeMirror都是经过长期考验的成熟项目，可靠性有保障。

下表对比了选型考量：

2. 构建公式编辑器组件

有了清晰的技术蓝图，我们就可以开始动手构建核心的FormulaEditor组件了。这个组件将封装CodeMirror，并为其注入公式编辑所需的特定能力。

2.1 基础集成与编辑器配置

首先，安装必要的依赖：

npm install vue-codemirror@4.0.6 codemirror formulajs --save

接下来，创建一个Vue单文件组件（如FormulaEditor.vue）。核心在于正确配置vue-codemirror组件，并为其设置一个针对我们公式语言的编辑模式。

<template>
  <div class="formula-editor">
    <codemirror
      ref="cmEditor"
      :value="code"
      :options="cmOptions"
      @input="onEditorInput"
      @ready="onEditorReady"
    />
    <!-- 可以在这里放置函数列表面板、错误提示区域等 -->
  </div>
</template>

<script>
import { codemirror } from 'vue-codemirror'
// 引入CodeMirror核心样式和基础模式
import 'codemirror/lib/codemirror.css'
import 'codemirror/mode/javascript/javascript' // 暂时借用js模式，后续自定义

export default {
  name: 'FormulaEditor',
  components: { codemirror },
  props: {
    // 初始公式值
    value: {
      type: String,
      default: ''
    },
    // 可用的字段列表，用于提示和补全
    fieldList: {
      type: Array,
      required: true
    },
    // 可用的函数分类列表
    functionCatalog: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      code: this.value,
      cmOptions: {
        tabSize: 2,
        mode: