vue实现公式编辑器组件

 组件弹框实现 样式自己调整  公式的数字与汉字元素、符号 建立元素表 动态获取

网上找了许多例子  借鉴出处： 大佬作品

完整代码

<template>
  <div id="formulaPage">
    <div
      ref="formulaView"
      class="formulaView"
      contentEditable="false"
      @click="recordPosition"
      @keyup="editEnter($event)"
      @copy="copy($event)"
      @paste="paste($event)"
    />
    <div class="infomationContent">
      <div class="infomationContent-leftFlexbox">
        <div class="tab">
          <ul>
            <li
              v-for="(v, i) in Num"
              :key="i"
              class="numberClass"
              :style="{ background: v.backgroundColor }"
              @click="addItem($event, 2, v, false)"
            >
              {
  
  { v.displayValue }}
            </li>
          </ul>
        </div>
        <div class="tab">
          <ul>
            <li
              v-for="(v, i) in customType"
              :key="i"
              class="typeClass"
              :style="{ background: v.backgroundColor }"
              :class="{ noclick: v.isFlag }"
              @click="addItem($event, 2, v, v.isFlag)"
            >
              {
  
  { v.displayValue }}
            </li>
          </ul>
        </div>
        <div class="tab">
          <ul>
            <li
              v-for="(v, i) in Symbol"
              :key="i"
              class="symbolClass"
              :style="{ background: v.backgroundColor }"
              @click="addItem($event, 2, v, false)"
            >
              {
  
  { v.displayValue }}
            </li>
          </ul>
        </div>
      </div>
      <div class="infomationContent-rightBtnbox">
        <div class="imgboxinfo" style="margin-bottom: 32px">
          <img src="@/assets/icons/delete.png" alt="" style="width: 40px; height: 40px" @click="deleteHumerText" />
        </div>
        <div class="imgboxinfo">
          <img src="@/assets/icons/save.png" alt="" style="width: 40px; height: 40px" @click="onSaveformulaEvent" />
        </div>
      </div>
    </div>

    <!-- <div class="footerComtent">
      <el-button type="primary" style="width: 200px; height: 30px" @click="onSaveformulaEvent">保存</el-button>
    </div> -->
    <!-- <button @click="parsingFormula('(长+宽+高)*2')">反向解析公式</button> -->
    <!-- <button @click="deleteHumerText()">删除</button> -->
  </div>
</template>

<script>
import { listElement } from '@/api/xxx/xxx'

export default {
  name: 'FormulaPage',
  props: {
    content: { type: String, default: '' },
    recoverdate: {
      type: Array,
      default: () => []
    },
    domflag: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      // 权限分类 元素分类不可用集合
      btnsRuleArray: {
        offer: ['thickness', 'nailmouth', 'bellsocket', 'gramweight'], // 报价
        weight: ['thickness', 'unitprice'], // 重量
        areavolume: ['gramweight', 'unitprice'] // 体积、面积、纸宽、纸长
      },
      // 公式字符串
      formulaStr: '',
      // 公式编辑器最后光标位置
      formulaLastRange: null,
      Num: [],
      Symbol: [],
      customType: [],
      backFormulaStrArray: [] // 按键值存储编辑器数据
    }
  },
  created() {
    this.backFormulaStrArray = []

    if (this.recoverdate) {
      this.backFormulaStrArray = this.recoverdate
      this.$nextTick(function () {
        this.parsingFormulaCustom(this.recoverdate)
      })
    }

    this.getList()
  },
  methods: {
    /** 查询所有公式元素 */
    getList() {
      listElement({ pageNum: 1, pageSize: 50 }).then(response => {
        response.rows.forEach(item => {
          item.isFlag = false
          if (this.domflag) {
            const newLegth = this.btn