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

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

解决思路：解决这个问题需要用到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样式需要