码迷,mamicode.com
首页 > 其他好文 > 详细

ueditor百度富文本表格列宽调整功能优化

时间:2020-09-17 23:00:49      阅读:35      评论:0      收藏:0      [点我收藏+]

标签:用户体验   导致   gif   技术   htm   解决   demo   距离   使用   

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

目前比较流行的富文本编辑器也有很多,但如果对富文本的表格功能及操作体验比较友好的,却为数不多,甚至有些简便的富文本编辑器不提供表格编辑的功能。经过对比与实际使用,对于表格功能支持得比较好的只有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的公司用户,并且同样被以上问题所困扰的团队一些帮助。

 

ueditor百度富文本表格列宽调整功能优化

标签:用户体验   导致   gif   技术   htm   解决   demo   距离   使用   

原文地址:https://www.cnblogs.com/qinpeifeng107/p/13656836.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!