大家好，我是前端西瓜哥。由于一些工作原因，wangEditor富文本编辑器的表格功能不能满足需求。创建的表格只设置了width:100%，列宽自适应效果很不好看。于是决定修改源码，加强表格功能，使其支持调整列宽。为了让读者更容易理解，最近对这部分逻辑进行了提取和优化，写了一个可以独立运行的demo，本文简单说一下实现思路。实现思路1.创建一个空表第一步是创建一个空表。要支持表格的宽度，需要在table元素下使用colgroup元素。根据表格的列数，我们可以在colgroup下创建相同数量的col元素，并设置宽度，按照相应的顺序给列宽度。可以在这个在线演示中查看效果。另外，如果表格的单元格没有内容，高度会塌陷，不能通过min-height和height设置高度。为了解决这个问题，我们通常会在创建空表格时向单元格中添加内容。2.高亮行的显示第二步是当光标移到列之间的分界线上时，显示高亮行。实现方法是：初始化时，在编辑器容器元素下创建一个绝对定位的div元素，作为高亮行隐藏。将鼠标移动事件绑定到编辑器容器元素。当光标移动到table元素内部时，遍历col元素，得到所有列分隔符的位置（最左边的不需要）。如果光标在这些分界线附近，则获取左移量，然后修改高亮线的位置，使其出现；否则，隐藏突出显示的行。3.拖放高亮线设置列宽。如前所述，当光标悬停在列分界线附近时，会出现一条高亮线。其实为了修改列宽，我们还需要记录一些数据：（1）对应的表格元素；(2)哪一列的rowIdx。当然，当光标移开时，这些数据应该被清除。下面是拖放动作的实现，涉及三个事件：鼠标按下、鼠标移动、鼠标松开：当鼠标在高亮行按下时，我们需要复制上面的数据并记录下来（3）要修改的列的宽度；(4)光标left的左偏移量(后面计算相对移动位置用到)(5)对应的col元素。当鼠标按下不松开时，移动鼠标代表拖动动作。此时我们计算出光标相对左移的位置，并为对应的col元素设置宽度，从而实现动画上的效果。释放鼠标时，这些数据将重置为空。因为我们只需要获取拖动的相对位置，就不用给编辑器容器绑定事件了。另外，为了确保鼠标释放事件正在发生，我最终选择将事件绑定到文档元素上。文档元素绑定的鼠标释放事件，即使鼠标按下后在浏览器外释放，也能触发。另外，为了应对列宽过小，甚至计算出负值的情况，我们需要设置一个最小列宽。代码实现那么这里对核心代码做一个简单的说明。首先是创建空表格式：constDEFAULT_COL_WIDTH=80constDEFAULT_COL_SIZE=5constDEFAULT_ROW_SIZE=5//生成空tablefunctioncreateTable(row=DEFAULT_ROW_SIZE,col=DEFAULT_COL_SIZE,hasTh=false,colWidth=DEFAULT_COL_SIZE)={)lettr,tdfor(leti=0;i
