ueditor 表格拖拽功能优化

相信在大多数公司内部的办公系统中，都会用到富文本编辑器的功能。

目前比较流行的富文本编辑器也有很多,但如果对富文本的表格功能及操作体验比较友好的，却为数不多，甚至有些简便的富文本编辑器不提供表格编辑的功能。经过对比与实际使用，对于表格功能支持得比较好的只有CKEditor,TinyEditor,UEditor，这几款富文本编辑器。

在这里就不再介绍一一每个编辑器的使用方法。主要是想分享一下在长期使用UEditor的过程中，遇到的一些对用户体验影响比较大的问题点及解决方法。

具体的解决方案可以见GitHub: UEditor百度富文本编辑器功能优化方案

优化后的UEditor在线Demo:  UEditor Online Demo

一、UEditor 的表格操作体验优化

尽管在UEditor中已经提供了比较完整丰富的表格功能，但在实际用户操作中，有些功能却是非常的难用，主要体现在以下方面：

1.从Excel中复制的表格粘贴到UEditor后，无法保留原来的样式和列宽

   具体表现为，从Excel复制的表格粘贴到UEditor后，整个表格的样式都会乱掉（如：背景色，字体及字体大小），列的宽度也会重新调整，导致粘贴后的表格与原来在Excel中完全不一样，效果如下图所示：　　

　　

  　　　　　　

　　　　　　　　　　　　　　　　　　　　　　　　　　　    图1.从Excel中复制粘贴内容到UEditor

可以看到粘贴到UEditor后，表格的颜色及列宽都已变了，并不能保持与在Excel中的一致。为了解决这个问题，参考借鉴了CKEditor的处理逻辑及代码，优化后的效果如下：

　　　　　　

　　　　　　　　　　　　　　　　　　　　　　　　　　图2.优化后从Excel粘贴到UEditor中的表格基本保持一致

 

2.UEditor中的表格列宽拖动很难选中，并且拖动后达不到预期的效果

    对于UEditor中对于表格的操作还有一个被用户吐槽得最多的功能，就是调整表格的列宽。原来的UEditor中，要想调整表格某一列的宽度，是比较困难的，首先是比较难选中，再者就是拖动了一定的距离后，那一列的宽度并不能达到理想的效果，主要原因是UEditor它会重新调整其它列的宽度，导致每一列的宽度都会重新变化。具体问题如下：

    　　　　  

　　　　　　　　　　　　　　　　　　　　　　　　图3.不容易选中拖动且拖动后达不到效果

 

可以看到，并不能很容易的就能选到想要拖动的列，即时选中拖动了，也达不到想要的效果。为了解决这个问题，重新去研究了UEditor的源码，并进行了一定的优化，优化后的效果如下：　

　　　

                  

　　　　　　　　　　　　　　　　　　　　　　图4.优化后对于表格列的拖拽体验有一定的提升

 

可以看到，经过优化后的列拖拽功能，相比以前能够更方便的选择到想到拖动的列，且拖动后不会影响到其他列，效果还是比较理想的。

二、UEditor 的文字编辑功能优化

       如果有同学经常使用UEditor编辑一些文章的话，特别是从别的地方拷贝过来UEditor中，再进行编辑的话，会发现在UEditor无法统一调整文字的字体，字体大小及颜色。具体的问题如下所示：   

      

      　　　 

　　　　　　　　　　　　　　　　　　　　　　　　　　图5.优化前文字编辑的效果并不是很理想

 

　　可以看到，对整个文字全选中，依次调整字体的大小及颜色后，有部分的文字并不能达到想要的效果。究其原因还是UEditor的问题，并没有处理到多层html嵌套的样式，才会导致有部分文字修改成功，有部分文字不成功。为了解决这个问题，还是对UEditor的源码进行了修改，优化后的效果如下：

      　　　 

　　　　　　　　　　　　　　　　　　　　　　图6.优化后的文字调整效果基本达到预期

 

 可以看到，优化后的文字编辑效果，基本能达到想到调整的效果。

以上便是在长期使用UEditor的过程中，用户吐槽得最多的问题，经过优化后，基本能解决用户对于UEditor富文本的操作及体验要求。希望能给还在使用UEditor的公司用户，并且同样被以上问题所困扰的团队一些帮助。