基于wangEditor富文本编辑器，粘贴表格内容智能生成带样式的表格

需求背景：公司运营人员发布线上业务公告，需要用到富文本编辑器，但是公告里带有样式的表格富文本编辑器却做不到，只能在其他地方制作成图片放进来，效率比较低下。

把内容粘贴进去，然后生成这么一个东西.

解决思路：解决这个问题需要用到v5版本（快速开始 | wangEditor这是链接），我是在vue里面用的，其他框架解决思路都是一样地。

第一步，先用onPaste这个事件去阻止默认粘贴行为（这里只说思路，具体用法自行查阅文档搜索customPaste），（if那个判断是用来区分粘贴的内容是普通文本还是表格内容），

粘贴的内容格式如下，先把内容获取到，然后用split正则把内容按照每一行分开，代码如上，code是生成了一个数组。addTable()就是我自己写的生成表格的函数。

 

第二步， 就是看我们上面说的addTable函数怎么写，也就是拿到了按行分割的表格内容后怎么生成表格。

 核心是这个api。将表格生成并插入进编辑器，表格的节点数据结构必须符合它的要求，

   //生成表格，插入编辑器
    addTable(data) {
      //表格数据结构
      let initTableNode = {
        type: 'table',
        width: 'auto',
        children: []
      }
      data.forEach((rowData, indexI) => {
        let tempRowNode = {
          type: 'table-row',
          children: []
        }
        //遍历行数据的每一个单元格，生成一个列数据结构并push进行数据结构
        rowData.split(/\s+/).forEach(colOfRowData => {
          let tempColNode = {
            type: 'table-cell',
            isHeader: false,
            children: [
              {
                text: colOfRowData
              }
            ]
          }
          if (indexI == 0) {
            tempColNode.isHeader = true
          }
          tempRowNode.children.push(tempColNode)
        })
        //行数据结构生成push进表格数据结构
        initTableNode.children.push(tempRowNode)
      })
     //遍历结束把表格插入进去
      this.editor.insertNode(initTableNode)
    },

 到这一步只能生成这种原始不带样式的表格，那么下一步就要修改样式了。✌️

 第三步，修改表格样式。查看控制台表格标签名就是table，那就好办了。

看招------>（为什么要遍历呢，因为可能有多个表格哈。）

      document.getElementsByTagName('table').forEach(tableNode => {
        this.changeStyle(tableNode)
      })

然后根据个人需要改样式，改样式这里只截个图哈，每个人需求不一样，基本思路就是那样，个人根据需要进行编写即可。

 看下图，需要注意地是tr并没有直接放在table里面，而是在table的一个子节点tbody里面，所以改

tr样式需要