介绍
介绍
福哥看到人家的文章发布平台都支持表格编辑功能，然后就把同福网的文章编辑器的表格功能给打开了，同福网的文章编辑器用的是UEditor文本编辑器，设置编辑器的按钮很容易。
不过，福哥打开后发现使用UEditor编辑器插入的table里面只有tbody没有thead，一般情况下表格第一行都是标题行，而标题行是要放到thead里面的，这可怎么办？
默认效果
默认的UEditor编辑器插入的表格是这样的。
HTML
<table> <tbody> <tr class="firstRow"> <td style="word-break: break-all;">id</td> <td style="word-break: break-all;">name</td> <td style="word-break: break-all;">age</td> </tr> <tr> <td style="word-break: break-all;">35</td> <td style="word-break: break-all;">福哥</td> <td style="word-break: break-all;">35</td> </tr> <tr> <td style="word-break: break-all;">18</td> <td style="word-break: break-all;">鬼谷子叔叔</td> <td style="word-break: break-all;">18</td> </tr> </tbody> </table>
效果
改造
思路
福哥改造的想法就是在插入表格的时候把第一行放到thead里面，同时使用th代替td填充单元格。所以首先要找到插入表格的按钮的事件位置，然后在渲染表格HTML结构的位置进行改造。
改造
打开UEditor根目录的ueditor.all.min.js文件，搜索“inserttable”关键字，找到如下代码位置，可以看到这里是渲染table的HTML结构的逻辑。
这里的代码被混淆处理过了不太容易阅读，不过这部分代码的逻辑还是很简单的，经过福哥的一通改造成了下面这个样子，就是将table分开了thead和tbody两个块，第一行转成th放入thead，后面的行放入tbody。
后面还有福哥针对css进行的改造，这个大家自己根据自己的喜好改造吧。可以在ueditor.all.min.js里面针对默认样式进行改造，也可以在调用ueditor插件的页面上面进行自定义样式。
HTML
<table> <thead> <tr class="firstRow"> <th style="word-break: break-all;">id</th> <th style="word-break: break-all;">name</th> <th style="word-break: break-all;">age</th> </tr> </thead> <tbody> <tr> <td style="word-break: break-all;">35</td> <td style="word-break: break-all;">福哥</td> <td style="word-break: break-all;">35</td> </tr> <tr> <td style="word-break: break-all;">18</td> <td style="word-break: break-all;">鬼谷子叔叔</td> <td style="word-break: break-all;">18</td> </tr> </tbody> </table>
效果
改造后的效果是这样的，标题行的内容居中，内容行的内容靠左，标题行做了一点特殊处理。
总结
福哥今天带着童鞋们对UEditor文本编辑器进行了一个小改造，实现在插入表格的地方可以添加标题行的功能。
这下同福网发文章也支持表格编辑了，哈哈哈~~