VUE学习（三）：基于wangeditor实现公式编辑功能

最新推荐文章于 2024-07-25 11:05:20 发布

任天真的小姐姐

最新推荐文章于 2024-07-25 11:05:20 发布

阅读量1.7k

点赞数

分类专栏： vue学习文章标签： vue.js

本文链接：https://blog.csdn.net/weiwei123_/article/details/127460459

版权

vue学习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、需求描述

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

二、代码实现

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节点的事件监听器才发现并解决了这个问题，即在之前的条件中放开富文本编辑器的权限。