标签：用户体验 导致 gif 技术 htm 解决 demo 距离 使用
相信在大多数公司内部的办公系统中，都会用到富文本编辑器的功能。
目前比较流行的富文本编辑器也有很多,但如果对富文本的表格功能及操作体验比较友好的，却为数不多，甚至有些简便的富文本编辑器不提供表格编辑的功能。经过对比与实际使用，对于表格功能支持得比较好的只有CKEditor,TinyEditor,UEditor，这几款富文本编辑器。
在这里就不再介绍一一每个编辑器的使用方法。主要是想分享一下在长期使用UEditor的过程中，遇到的一些对用户体验影响比较大的问题点及解决方法。
具体的解决方案可以见GitHub: UEditor百度富文本编辑器功能优化方案
优化后的UEditor在线Demo: UEditor Online Demo
尽管在UEditor中已经提供了比较完整丰富的表格功能，但在实际用户操作中，有些功能却是非常的难用，主要体现在以下方面：
1.从Excel中复制的表格粘贴到UEditor后，无法保留原来的样式和列宽
具体表现为，从Excel复制的表格粘贴到UEditor后，整个表格的样式都会乱掉（如：背景色，字体及字体大小），列的宽度也会重新调整，导致粘贴后的表格与原来在Excel中完全不一样，效果如下图所示：
可以看到粘贴到UEditor后，表格的颜色及列宽都已变了，并不能保持与在Excel中的一致。为了解决这个问题，参考借鉴了CKEditor的处理逻辑及代码，优化后的效果如下：
2.UEditor中的表格列宽拖动很难选中，并且拖动后达不到预期的效果
对于UEditor中对于表格的操作还有一个被用户吐槽得最多的功能，就是调整表格的列宽。原来的UEditor中，要想调整表格某一列的宽度，是比较困难的，首先是比较难选中，再者就是拖动了一定的距离后，那一列的宽度并不能达到理想的效果，主要原因是UEditor它会重新调整其它列的宽度，导致每一列的宽度都会重新变化。具体问题如下：
可以看到，并不能很容易的就能选到想要拖动的列，即时选中拖动了，也达不到想要的效果。为了解决这个问题，重新去研究了UEditor的源码，并进行了一定的优化，优化后的效果如下：
可以看到，经过优化后的列拖拽功能，相比以前能够更方便的选择到想到拖动的列，且拖动后不会影响到其他列，效果还是比较理想的。
如果有同学经常使用UEditor编辑一些文章的话，特别是从别的地方拷贝过来UEditor中，再进行编辑的话，会发现在UEditor无法统一调整文字的字体，字体大小及颜色。具体的问题如下所示：
可以看到，对整个文字全选中，依次调整字体的大小及颜色后，有部分的文字并不能达到想要的效果。究其原因还是UEditor的问题，并没有处理到多层html嵌套的样式，才会导致有部分文字修改成功，有部分文字不成功。为了解决这个问题，还是对UEditor的源码进行了修改，优化后的效果如下：
可以看到，优化后的文字编辑效果，基本能达到想到调整的效果。
以上便是在长期使用UEditor的过程中，用户吐槽得最多的问题，经过优化后，基本能解决用户对于UEditor富文本的操作及体验要求。希望能给还在使用UEditor的公司用户，并且同样被以上问题所困扰的团队一些帮助。
标签：用户体验 导致 gif 技术 htm 解决 demo 距离 使用
原文地址：https://www.cnblogs.com/qinpeifeng107/p/13656836.html
