在日常开发中对于一些数据计算场景可能会遇到标签计算的需求，下面关于如何使用CodeMirror实现标签计算编辑功能。

1，结果图

2，主体代码逻辑

大家只需要复制粘贴主要codeMirror使用逻辑即可

<template><el-dialogref="dialogRef":model-value="visible"width="800px":close-on-press-escape="false"destroy-on-closeappend-to-body@close="() => {$emit('update:visible', false);}"><template #title><span> 编辑表达式 </span></template><!-- 左侧无用dom元素已删除 --><div class="content__right"><div class="symbol-group"><div v-for="item in symbolList" :key="item.code" class="symbol-item" @click="handleSymbolClick(item)">{{ item.name }}</div></div><!-- 代码编辑器 --><textarearef="codeEditorContainerRef"v-model="currentCodeInEditor"class="editor"/></div></div><template #footer><div class="dialog-button-box"><el-buttonsize="small"@click="() => {$emit('update:visible', false);}">取消</el-button><el-button size="small" type="primary" @click="handleOk">确定</el-button></div></template></el-dialog>
</template><script lang="ts">
import { defineComponent, reactive, toRefs, watch, ref, onMounted, nextTick } from 'vue';
import { InfoFilled, Search } from '@element-plus/icons';
import { TreeNodeData } from 'element-plus/es/el-tree/src/tree.type.d';
// 引入代码编辑器核心配置包
import * as CodeMirror from 'codemirror';
import 'codemirror/lib/codemirror.css';// 引入代码编辑器主题样式
import 'codemirror/theme/base16-light.css';
import 'codemirror/theme/ambiance.css';
import 'codemirror/addon/hint/show-hint.css';
import 'codemirror/theme/monokai.css';
import 'codemirror/theme/material.css';
import 'codemirror/theme/dracula.css';
import 'codemirror/addon/fold/foldgutter.css';
import 'codemirror/mode/javascript/javascript';// 引入代码编辑器常用语言包
require('codemirror/addon/edit/matchbrackets');
require('codemirror/addon/selection/active-line');
require('codemirror/mode/sql/sql');
require('codemirror/addon/hint/show-hint');
require('codemirror/addon/hint/sql-hint');
require('codemirror/keymap/sublime');// 引入代码折叠文件
require('codemirror/addon/fold/foldcode');
require('codemirror/addon/fold/foldgutter');
require('codemirror/addon/fold/brace-fold');
require('codemirror/addon/fold/xml-fold');
require('codemirror/addon/fold/indent-fold');
require('codemirror/addon/fold/markdown-fold');
require('codemirror/addon/fold/comment-fold');export default defineComponent({name: 'RemarksDialog',components: {},props: {visible: {type: Boolean,default: false,},data: {type: String,default: '',},},emits: ['update:visible', 'save'],setup(props, { emit }) {const dialogRef = ref();const state = reactive({// 符号列表symbolList: [{id: 'plus',code: 'plus',name: '+',type: 'operator',},{id: 'minus',code: 'minus',name: '-',type: 'operator',},{id: 'multiply',code: 'multiply',name: '*',type: 'operator',},{id: 'exception',code: 'exception',name: '/',type: 'operator',},{id: 'leftBrackets',code: 'leftBrackets',name: '(',type: 'operator',},{id: 'rightBrackets',code: 'rightBrackets',name: ')',type: 'operator',},] as SymbolItem[],});// 代码编辑器容器实例const codeEditorContainerRef = ref<HTMLElement | null>();// 代码编辑器let editor : TreeNodeData | null;// 编辑器当前所用编程语言const currentLanguage = ref('javascript');// 编辑器当前主题const currentTheme = ref('base16-light');// 编辑器当前展示的代码const currentCodeInEditor = ref();// 获取表达式的元素集合const getCalcResult = (): SymbolItem[] => {const temp: any[] = editor?.getValue().split('$');// 清除最后一个空格元素temp.pop();// 循环生成最后的集合return temp.map((item: string) => state.calculationIdMap[item]).filter((item) => !!item);};/*** @description: 创建标签* @return {*}*/const makeLabel = (mark: any) => {const spanDom = document.createElement('span');const label = mark.variable;spanDom.title = label;spanDom.innerText = label;spanDom.classList.add('textarea-tag');spanDom.dataset.variable = mark.variable;editor?.markText(mark.start, mark.end, {replacedWith: spanDom, // 将特定位置的文本替换成给定的节点元素，必须是行元素，不能是块元素atomic: true, // 原子化，会把节点元素当成一个整体，光标不会进入其中});};/*** @description: 插入标签* @return {*}*/const insertLabel = (content: any, isCalcDim: boolean) => {if (!content) return;const cursor = editor?.getCursor();editor?.replaceSelection(`${content.code}$`);makeLabel({start: cursor,end: editor?.getCursor(), // 获取自定义标签插入之后的光标对象variable: content.name,});editor?.setCursor(editor?.getCursor());editor?.focus();};/*** 初始化代码编辑器*/const initEditor = () => {nextTick(() => {if (codeEditorContainerRef.value) {editor = CodeMirror.fromTextArea(codeEditorContainerRef.value, {// 编辑器语言的模式mode: currentLanguage.value,// 编辑器主题风格theme: currentTheme.value,// 缩进的时候，是否把前面的 N*tab 大小的空间，转化为 N个tab 字符indentWithTabs: true,// 是否使用 mode 提供的上下文的缩进smartIndent: true,// 编辑器左侧是否显示行号lineNumbers: true,// 括号匹配matchBrackets: true,// 初始化时是否自动获得焦点autofocus: true,// 代码自动换行lineWrapping: true,// 代码块折叠foldGutter: true,// 只读readOnly: false,// 代码块折叠样式gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],// 自定义快捷键extraKeys: { Ctrl: 'autocomplete' },// 自定义提示选项hintOptions: {tables: {users: ['name', 'score', 'birthDate'],countries: ['name', 'population', 'size'],},},});// 公式回显if (props.data) {const dataArray = JSON.parse(props.data);dataArray.forEach((item: any) => {insertLabel(item, false);state.calculationIdMap[item.code] = item;});// 重新计算时间维度和可用维度setTimeout(() => {// 重新计算时间维度和其他可用维度resetCurrentDateDimension();resetCurrentOtherDimension();}, 500);}}});};/*** @description: 符号点击触发方法* @param {SymbolItem} data* @return {*}*/const handleSymbolClick = (data: SymbolItem) => {insertLabel(data, false);state.calculationIdMap[data.code] = data;};watch(() => props.visible,async (newVal) => {if (newVal) {initEditor();await getIndicatorList();} else {state.currentOtherDimension = [];state.currentDateDimension = {} as any;}},);return {...toRefs(state),dialogRef,Search,codeEditorContainerRef,currentCodeInEditor,handleSymbolClick,};},
});
</script><style lang="scss" scoped></style>

大家只需要关注codeMirror插件的引入以及相关api 的使用即可。

未解决的问题：在点击生成标签只有，不能通过鼠标点击直接移动光标位置，只能通过方向键移动光标位置。