公式编辑器组件代码

最新推荐文章于 2026-04-15 18:56:29 发布
原创 最新推荐文章于 2026-04-15 18:56:29 发布 · 667 阅读 · 6 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
GEO检测
标签
#编辑器

这个代码实现了一个公式编辑器组件，主要用于构建和编辑包含变量和函数的规则表达式。下面是对代码逻辑的详细分析：

组件结构
组件主要分为三部分：
在这里插入图片描述

变量池：显示可用变量并支持搜索过滤

规则池：提供运算符和函数按钮，以及文本编辑区域

底部操作按钮：提供清空、取消和确认功能

主要功能

  1. 变量管理
    通过getProperties方法从API获取变量列表

变量显示格式为identifieridentifieridentifier（如temptemptemp）

支持通过搜索框过滤变量

点击变量按钮可将变量插入到规则文本中

  1. 规则编辑
    提供运算符和函数按钮（+、-、*、/、and、or等）

支持文本区域直接编辑

点击运算符/函数按钮可将其插入到规则文本中

函数插入时会自动添加括号（如int( )）

  1. 历史记录
    实现撤销(undo)和重做(redo)功能

使用history数组记录所有操作状态

currentIndex跟踪当前状态位置

每次修改规则内容都会记录到历史中

  1. 数据流
    通过props接收初始规则(initialRule)

通过emit事件confirm将编辑好的规则内容返回父组件

支持通过modelValue控制显示/隐藏

关键方法
insertVariable:

在光标位置插入变量

保持光标在变量后

记录操作历史

insertSymbol:

在光标位置插入运算符或函数

自动添加空格和括号

记录操作历史

onUndo/onRedo:

撤销/重做操作

更新当前索引和规则内容

onClearRule:

清空规则内容

弹出确认对话框

onConfirm:

将最终规则内容通过事件发送给父组件

样式设计
组件采用响应式布局，主要特点：

使用flex布局组织各部分

变量列表可滚动

运算符按钮加粗显示

各部分有边框和圆角

使用场景
这个组件适用于需要构建复杂表达式或公式的场景，如：

物联网设备数据处理规则

业务规则引擎

数据转换配置

条件判断逻辑构建

组件通过提供可视化的变量和函数选择，降低了编写复杂规则的难度。

在这里插入图片描述
公式编辑器组件代码分析

<template>
  <el-dialog
    v-model="visible"
    title="公式编辑器"
    width="900px"
    :close-on-click-modal="false"
    @close="onCancel"
    append-to-body
  >
    <div class="data-flow-container">
      <div class="formula-editor flex flex-column h-full">
        <!-- 变量池 -->
        <div class="variable-pool section-container">
          <div class="section-label">变量池：</div>
          <div class="search-bar">
            <el-input v-model="searchKeyword" placeholder="模糊搜索" clearable></el-input>
          </div>
          <div class="variable-list">
            <el-button
              v-for="item in filteredVariables"
              :key="item.key"
              type="primary"
              @click="insertVariable(item)"
              :title="item.title"
              size="small"
            >
              {{ item.label }}
            </el-button>
          </div>
        </div>

        <!-- 规则池 -->
        <div class="rule-pool section-container">
          <div class="section-label flex justify-between align-center">
            <span>规则池：</span>
            <div class="history-buttons">
              <el-button :disabled="!canUndo" size="small" @click="onUndo">
                <el-icon><ArrowLeft /></el-icon>上一步
              </el-button>
              <el-button :disabled="!canRedo" size="small" @click="onRedo">
                下一步<el-icon><ArrowRight /></el-icon>
              </el-button>
            </div>
          </div>
          <div class="symbols-bar">
            <el-button
              v-for="symbol in ruleGroups"
              :key="symbol.value"
              @click="insertSymbol(symbol.value)"
              size="small"
            >
              {{ symbol.label }}
            </el-button>
          </div>
          <el-input
            v-model="ruleContent"
            type="textarea"
            :rows="4"
            placeholder="请输入规则"
            ref="ruleInput"
          ></el-input>
        </div>

        <!-- 底部按钮 -->
        <div class="footer">
          <el-button type="warning" @click="onClearRule">清空规则池</el-button>
          <el-button @click="onCancel">取消</el-button>
          <el-button type="primary" @click="onConfirm">确定</el-button>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script setup>
import { ref, watch, computed, onMounted, nextTick } from 'vue'
import { ArrowLeft, ArrowRight } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import FormulaEditorApi from '@/views/hp-equipment-sentinel/api/FormulaEditor'
import DeviceModelApi from '@/views/hp-equipment-sentinel/api/DeviceModel' // getProperties
import { deepClone } from '@/utils/index.js'

const visible = ref(false)
const emit = defineEmits(['update:modelValue', 'confirm'])
const name = ref('数据流转')
let formulaGroups = ref([])
let functionGroups = ref([])
let ruleGroups = ref([])
const formulaTest = ref([])
// 变量池数据
let variables = computed(() => {
  let variables = formulaGroups.value.map((item) => {
    // console.log('clg-on -> item',item)
    return {
      label: item.label,
      key: item.name,
      name: item.name,
      title: item.description
    }
  })
  return variables
})

const searchKeyword = ref('')
const ruleContent = ref('')
const ruleInput = ref(null)

// 过滤变量
const filteredVariables = computed(() => {
  //  console.log('clg-on -> variables.value', variables.value)
  // console.log('clg-on -> searchKeyword.value', !searchKeyword.value)
  if (!searchKeyword.value) return variables.value
  return variables.value.filter(
    (item) =>
      item.label.toLowerCase().includes(searchKeyword.value.toLowerCase()) ||
      item.key.toLowerCase().includes(searchKeyword.value.toLowerCase())
  )
})
// 获取变量池数据
const getProperties = async () => {
  let params = {
    pageNum: 1,
    pageSize: 100000,
    thing_model: props.thingModel
  }
  const res = await DeviceModelApi.getProperties({ ...params, ...props.searchParam })
  if (res.data.code !== 200) {
    ElMessage.error(res.data.msg)
    return
  }
  // console.log('clg-on -> getProperties', res)
  // 修改 getProperties 方法中的映射逻辑
  formulaGroups.value = res.data.data.list.map((item) => {
    return {
      label: item.name, // 修改为显示 name
      key: item.identifier,
      name: '$' + item.identifier + '$',
      title: item.description // 保留 description 作为提示信息
    }
  })
}
// 获取规则池数据
const getFormulaConfigList = async () => {
  const res = await FormulaEditorApi.getFormulaConfig()
  if (res.data.code !== 200) {
    ElMessage.error(res.data.msg)
    return
  }
  functionGroups.value = res.data.data['functionGroups'].map((item) => {
    item.functions.forEach((jtem) => {
      jtem.label = jtem.description
      jtem.key = jtem.name
    })
    return item
  })
  const functionGroupsTemp = deepClone(functionGroups.value)
  // 通常情况下 我们只使用 逻辑预算符
  if (props.isFunctionGroups) {
    // 如果我是基本表 我需要删除 聚合函数 和 窗口函数
    ruleGroups.value =  functionGroupsTemp.filter(item=>{
      return item.key !== 'agg_functions' && item.key !== 'window_functions'
    })
  } else {
    // 全量情况下，我们才使用 逻辑预算符 和 聚合预算符
    ruleGroups.value = [...functionGroups.value]
  }


  // 方法一：获取所有函数的params
  ruleGroups.value = ruleGroups.value.reduce((acc, category) => {
    const functionParams = category.functions.map((func) => ({
      name: func.name,
      title: func.description,
      label: func.description,
      key: func.name,
      value: func.name
      //   params: func.params
    }))
    return [...acc, ...functionParams]
  }, [])
  // console.log(typeof  props.isFunctionGroups , "props.isFunctionGroups",ruleGroups.value)
}
onMounted(() => {
  getFormulaConfigList()
})

// 父级接受
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },

  searchParam: {
    type: Object,
    default: () => ({})
  },
  isFunctionGroups: {
    type: Boolean,
    default: false
  },
  initialRule: {
    // 添加初始规则属性
    type: String,
    default: ''
  },
  thingModel: {
    type: String,
    default: ''
  }
})

// 监听 modelValue 变化
watch(
  () => props.modelValue,
  (newVal) => {
    visible.value = newVal

    if (visible.value) {
      getProperties()
    }

    if (newVal) {
      // 打开弹窗时清空规则
      ruleContent.value = props.initialRule || ''
      // 重置历史记录
      history.value = [ruleContent.value]
      currentIndex.value = 0
    }
  },
  { immediate: true },
  { deep: true }
)

const onCancel = () => {
  emit('update:modelValue', false)
}

// 符号列表
const symbols = [
  { label: ')', value: ')' },
  { label: '+', value: '+' },
  { label: '-', value: '-' },
  { label: '*', value: '*' },
  { label: '/', value: '/' },
  { label: '==', value: '==' },
  { label: '!=', value: '!=' },
  { label: '>', value: '>' },
  { label: '<', value: '<' },
  { label: '>=', value: '>=' },
  { label: '<=', value: '<=' },
  { label: 'and', value: 'and' },
  { label: 'or', value: 'or' },
  { label: 'int()', value: 'int()' },
  { label: 'float()', value: 'float()' },
  { label: 'string()', value: 'string()' }
]

// 操作历史记录
const history = ref([])
const currentIndex = ref(-1)

// 记录操作
const recordOperation = (content) => {
  // 如果当前不是在最新的状态，需要清除后面的历史
  if (currentIndex.value < history.value.length - 1) {
    history.value = history.value.slice(0, currentIndex.value + 1)
  }
  history.value.push(content)
  currentIndex.value = history.value.length - 1
}

// 是否可以撤销
const canUndo = computed(() => currentIndex.value > 0)

// 是否可以重做
const canRedo = computed(() => currentIndex.value < history.value.length - 1)

// 撤销操作
const onUndo = () => {
  if (canUndo.value) {
    currentIndex.value--
    ruleContent.value = history.value[currentIndex.value]
  }
}

// 重做操作
const onRedo = () => {
  if (canRedo.value) {
    currentIndex.value++
    ruleContent.value = history.value[currentIndex.value]
  }
}
const onConfirm = () => {
  // console.log('clg-on -> ruleContent.value',ruleContent.value)
  emit('confirm', ruleContent.value)
  visible.value = false
}
// 修改插入变量的方法
const insertVariable = (variable) => {
  const input = ruleInput.value.textarea
  const position = input.selectionStart
  const before = ruleContent.value.slice(0, position)
  const after = ruleContent.value.slice(position)
  const newContent = before + variable.key + after
  ruleContent.value = newContent
  recordOperation(newContent) // 记录操作

  nextTick(() => {
    input.setSelectionRange(position + variable.key.length, position + variable.key.length)
    input.focus()
  })
}

// 修改插入符号的方法
const insertSymbol = (symbol) => {
  console.log('clg-on -> symbol',symbol)
  symbol = ' ' + symbol + '(  '
  const input = ruleInput.value.textarea
  const position = input.selectionStart
  const before = ruleContent.value.slice(0, position)
  const after = ruleContent.value.slice(position)
  const newContent = before + symbol + after
  ruleContent.value = newContent + '  )'
  recordOperation(newContent) // 记录操作

  nextTick(() => {
    input.setSelectionRange(position + symbol.length, position + symbol.length)
    input.focus()
  })
}

// 修改清空规则池的方法
const onClearRule = () => {
  ElMessageBox.confirm('确认清空规则池内容吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      ruleContent.value = ''
      recordOperation('') // 记录清空操作
      ElMessage.success('已清空规则池')
    })
    .catch(() => {
      // 取消清空
    })
}
</script>

<style scoped lang="scss">
.data-flow-container {
  background-color: #fff;
  height: 100%;
  //padding: 20px;
  border-radius: 4px;
  //box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.formula-editor {
  padding: 20px;
  gap: 16px;

  .section-container {
    border: 1px solid #ddd;
    padding: 16px;
    border-radius: 4px;
    margin-bottom: 16px;
  }

  .section-label {
    font-size: 14px;
    font-weight: 500;
    color: #333;
    margin-bottom: 16px;

    .history-buttons {
      display: flex;
      gap: 8px;

      :deep(.el-button) {
        display: flex;
        align-items: center;
        gap: 4px;
      }
    }
  }

  .variable-pool {
    .search-bar {
      margin-bottom: 16px;
    }

    .variable-list {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      max-height: 200px;
      overflow: scroll;
    }
  }

  .rule-pool {
    .symbols-bar {
      margin-bottom: 16px;
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      font-weight: 800;
      :deep(.el-button) {
        font-weight: 800;
        color: #333;
      }
    }
  }

  .footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
  }
}

.gateway-manager {
  flex: 1;
  padding: 20px;
  background-color: #fff;
  overflow: hidden;

  .tips {
    font-size: 14px;
    font-weight: normal;
    line-height: 22px;
    letter-spacing: 0px;
    color: #606266;
  }

  .input-width {
    width: 220px;
  }
}

.table-container {
  flex: 1;
  overflow: hidden;
  margin: 16px 0;
}
</style>


// 父组件调用
<FormulaEditor
          v-model="formulaVisible"  // 开关
          :initial-rule="formData.condition"  // 回显
          :thing-model="String(formData.thing_model)" // id
          :isFunctionGroups="true" // 全量 非全量
          @submit="handleFormulaSubmit"
          @confirm="handleFormulaConfirm" 
        />
青柠97
关注
低代码平台工具 —— 公式编辑器
Android_Cob的博客
08-18 3345
公式编辑器：公式编辑用于字段值来源于其他字段或是来源于函数计算结果都可由公式编辑来完成编辑器函数库事件监听。
vue实现公式编辑器组件
maqiangleader的博客
08-25 1811
基于vue 开发公式编辑器 适应网站开发需求 项目要求不可手动输入 只能点击
jeecg 的JCodeEditor代码编辑器组件使用
reg183的专栏
11-09 866
【代码】jeecg 的JCodeEditor组件使用。
自定义Vue前端组件
qq_35680323的博客
04-21 568
前述：最近在学习element-ui，试着搭建自己的前端组件库（基于Vue），并发布到npm 一、搭建目录结构 1. 创建目录 lushuixi-ui 并打开目录 2. # npm init ，生成一个package.json文件 3. 搭建目录结构 packages 组件包目录 src 源码入口目录 scripts 脚本执行目录 README.md package.json 4. 在packages目录创建一个button组件 创建button目录 ...
vue3代码编辑器组件codemirror-editor-vue3
XKFC1的博客
08-01 3182
vue3代码编辑器组件codemirror-editor-vue3
React markdown 编辑器
且听风吟的博客
04-26 8623
`react-markdown` 是一款 `github` 上开源的适用于 `react` 的 `markdown` 组件，可以基本实现 `markdown` 的功能，且可以根据自己实际应用定制的 `remark` 组件。
Vue开发Vant组件问题
m0_50967270的博客
11-19 902
Vue开发组件问题vue-awesome-swiper组件①css引入错误②实现中间大和两边小布局Vant组件①吸顶组件(搜索栏和nav导航实例)Flex布局自动换行均等布局(三个)欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLo
vue公式编辑器 加强版(简化版)
qq_45385505的博客
06-06 4302
公式编辑器
低代码平台中的公式编辑器：从技术选型到实战应用
最新发布
weixin_30550081的博客
04-15 326
本文深入探讨了低代码平台中公式编辑器的技术选型与实战应用，重点解析了如何通过CodeMirror、formulajs等工具构建高效、易用的公式编辑器。文章详细介绍了动态数据绑定、函数提示、性能优化等关键技术实现，并分享了薪资计算、库存预警等业务场景的实战案例，帮助开发者提升低代码平台的开发效率与灵活性。
Vue2低代码平台实战：如何用formulajs和codemirror打造企业级公式编辑器
weixin_29017445的博客
03-05 111
本文详细介绍了如何在Vue2低代码平台中，利用formulajs和codemirror构建一个功能强大的企业级公式编辑器。文章深入探讨了技术选型、核心组件实现、智能提示、实时计算等关键环节，并提供了高级功能优化与安全集成的实战指南，旨在帮助开发者快速为低代码平台赋能动态计算能力。
【一个简单的vue公式编辑器组件】
qq_42989165的博客
08-23 4910
基于vue实现数据统计公式的基本功能
数学公式编辑器（前端预研）
smell201611010513的博客
06-11 1530
tab=readme-ov-file 看起来已经很久没有维护了且没有找到对应的官网。http://tinymce.ax-z.cn/more-plugins/kityformula-editor.php中文文档。英文官网没有公式，21年的一个中文文档倒是有，按照公式插件安装在项目的应用上实践未生效。mathlive：不能自己输入指标名 只能输入插件自带的变量。mathjax识别数学公式。数学公式编辑器：（少）（不适用我们的项目）
基于Vue2的简易公式编辑器（自带公式校验）
前端你鹏哥的博客
04-19 2816
基于vue2的简易公式编辑器，可应对一些简单的加减乘除算法，复制源码可直接使用
20个最流行的在线代码编辑器控件
s011803的专栏
06-17 2388
Web在线代码编辑器控件已经成为开发者工作流程中不可或缺的一部分。这些编辑器不仅提供了方便的代码编辑环境，还集成了多种强大的功能，提升了开发效率。本文将介绍20个最流行的在线编辑器控件，并通过表格列出每个编辑器的特性和区别。
基于Vue+ElementUI+UEditor的数学公式编辑器开发实战
weixin_33245447的博客
09-09 974
ElementUI 是一个基于 Vue.js 2.x/3.x 的 UI 组件库，其核心目标是为开发者提供一套开箱即用的企业级中后台前端解决方案。它由一系列精心设计的组件组成，如按钮、输入框、表格、对话框等，覆盖了常见的 UI 场景。ElementUI 的优势体现在以下几个方面：特性描述组件丰富提供超过50个常用组件，涵盖表单、表格、导航、弹窗等响应式设计支持现代浏览器和主流设备的响应式布局文档完善官方提供详细的文档和示例代码，学习成本低社区活跃。
JMEditor开源在线公式编辑器全面支持主流浏览器
jmeditor的专栏
06-22 8073
  JMEditor V0.9.4 补丁版发布内容： 在以下浏览器测试通过，完全真机测试。 IE8.0、IE9.0、IE10.0、Firefox 21.0、Chrome 27.0。   下载地址：http://www.jmeditor.com/bbs/read.php?tid=57&amp;fid=2   介绍： JMEditor（JavaScript Math Editor）是...
react项目中自定义一个markdown编辑器
BradenHan的专栏
04-12 2003
Markdown 是一种轻量级标记语言。Markdown是一种简单的格式化文本的方法，在任何设备上看起来都很棒。它不会做任何花哨的事情，比如改变字体大小、颜色或类型——只是基本的，使用你已经知道的键盘符号。它还允许人们使用易读易写的纯文本格式编写文档，然后转换成有效的 XHTML（或者HTML）文档。这种语言吸收了很多在电子邮件中已有的纯文本标记的特性。由于 Markdown 的轻量化、易读易写特性，并且对于都有支持，许多网站都广泛使用 Markdown 来撰写帮助文档或是用于论坛上发表消息。
TinyMCE编辑器中CTRL+V粘贴WORD公式图片并上传的实现方法？
weixin_45525177的博客
07-11 611
没有任何限制的在任何产品中使用，完全开放产品源代码。今儿一早，又有位网友“神通广大”地加了我微信，说是想探探这块技术的底儿，聊聊解决方案。原来，这位老兄也撞上了在富文本编辑器里粘贴Word图片自动上传的“小怪兽”。我寻思着，我这微信号虽说在网上“广而告之”了，但能精准找到我的，这位老兄也算是“寻宝高手”了，有点东西！昨晚论坛里还有位网友私信我，问怎么解决Word内容复制粘贴的难题。这位显然是技术新手村刚出来的，上传图片、保存图片、返回文件路径这些基础操作，对他来说都是“未解之谜”。
JMEditor V0.9.4开源在线公式编辑器全面支持主流浏览器
jmeditor的专栏
06-22 8019
JMEditor V0.9.4 补丁版发布内容： 在以下浏览器测试通过，完全真机测试。 IE8.0、IE9.0、IE10.0、Firefox 21.0、Chrome 27.0。   下载地址：http://www.jmeditor.com/bbs/read.php?tid=57&fid=2   介绍： JMEditor（JavaScript Math Editor）是基于CKEdit
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值