CodeMirror 创建标签计算编辑器

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

1，结果图

2，主体代码逻辑

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

<template>
  <el-dialog
    ref="dialogRef"
    :model-value="visible"
    width="800px"
    :close-on-press-escape="false"
    destroy-on-close
    append-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>
        <!-- 代码编辑器 -->
        <textarea
          ref="codeEditorContainerRef"
          v-model="currentCodeInEditor"
          class="editor"
        />
      </div>
    </div>

    <template #footer>
      <div class="dialog-button-box">
        <el-button
          size="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 的使用即可。

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