VUE学习(三):基于wangeditor实现公式编辑功能

一、需求描述

       最近一个需求中需要点击运算符和基础指标进行衍生指标的规则配置功能,因为配置的指标规则还需要能够编辑,包括输入数字和删除,所以综合考虑采用富文本编辑器实现该功能。

二、代码实现

1.引入编辑器

npm install wangeditor --save

2.创建并使用编辑器

<template>
  <div>
    <div>
      <!--可选指标-->
      <span unselectable="on" onmousedown="return false" v-for="(item, index) in codeList" :key="index" @click="checkCode(item, index)" v-else>{{item}}</span>
    </div>
    <div>
       <p><span>运算符:</span><span v-for="(key, index) in logicList" :key="index" @click="checkFun(key.itemCd)" unselectable="on" onmousedown="return false">{{key.itemCd}}</span></p >
    </div>
    <p style="font-size: 14px;padding-left: 20px;">指标规则配置:</p >
    <div id="wangeditor">
       <div ref="editorElem" style="text-align: left;font-size: 14px"></div>
    </div>
  </div>
</template>
<script>
  import Editor from 'wangeditor'
  export default {
    data () {
      return {
        editor: null,
        editorContent: '',
        codeList: [],
        lodicList: []
      }
    },
    methods: {
      checkCode (k, index) {
        let w = (15 * k.length) + 'px'
        let ks = '<input value="' + k + '" id="' + this.nodeList[index] + '" disabled 
          style="width: ' + w + '">'
        this.editor.cmd.do('insertHTML', ks)
      },
      checkFun (k) {
        let w = ''
        if (k.length < 2) {
          w = '12px'
        } else {
          w = (8 * k.length) + 'px'
        }
        let ks = '<input value="' + k + '" id="' + k + '" disabled style="width: ' + w + 
          '">'
        this.editor.cmd.do('insertHTML', ks)
      }
    },
    mounted () {
      this.editor = new Editor(this.$refs['editorElem'])
      this.editor.config.onchange = (html) => {
        this.editorContent = html
      }
      this.editor.config.zIndex = 99
      this.editor.config.menus = []
      this.editor.create()
    }
  }
</script>

3.注意点:

(1)因为wangeditor的版本不同,在创建时可能是this.editor.config,也可能是this.editor.customConfig,这一点需要注意;

(2)我自己在实际使用中遇到了问题,在之前的系统中对Backspace键进行了禁用,只有在input输入框和textarea输入框中允许使用,所以就导致在编辑器中Backspace按键不起作用,无法删除编辑的内容,最后通过F12,看到了dom节点的事件监听器才发现并解决了这个问题,即在之前的条件中放开富文本编辑器的权限。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值