相信在大多數公司內部的辦公系統中，都會用到富文本編輯器的功能，
目前比較流行的富文本編輯器也有很多,但如果對富文本的表格功能及操作體驗比較友好的，卻為數不多，甚至有些簡便的富文本編輯器不提供表格編輯的功能，經過對比與實際使用，對于表格功能支持得比較好的只有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它會重新調整其它列的寬度，導致每一列的寬度都會重新變化，具體問題如下：
可以看到，并不能很容易的就能選到想要拖動的列，即時選中拖動了，也達不到想要的效果，為了解決這個問題，重新去研究了UEditor的原始碼，并進行了一定的優化，優化后的效果如下：
圖4.優化后對于表格列的拖拽體驗有一定的提升
可以看到，經過優化后的列拖拽功能，相比以前能夠更方便的選擇到想到拖動的列，且拖動后不會影響到其他列，效果還是比較理想的，
二、UEditor 的文字編輯功能優化
如果有同學經常使用UEditor編輯一些文章的話，特別是從別的地方拷貝過來UEditor中，再進行編輯的話，會發現在UEditor無法統一調整文字的字體，字體大小及顏色，具體的問題如下所示：
圖5.優化前文字編輯的效果并不是很理想
可以看到，對整個文字全選中，依次調整字體的大小及顏色后，有部分的文字并不能達到想要的效果，究其原因還是UEditor的問題，并沒有處理到多層html嵌套的樣式，才會導致有部分文字修改成功，有部分文字不成功，為了解決這個問題，還是對UEditor的原始碼進行了修改，優化后的效果如下：
圖6.優化后的文字調整效果基本達到預期
可以看到，優化后的文字編輯效果，基本能達到想到調整的效果，
以上便是在長期使用UEditor的程序中，用戶吐槽得最多的問題，經過優化后，基本能解決用戶對于UEditor富文本的操作及體驗要求，希望能給還在使用UEditor的公司用戶，并且同樣被以上問題所困擾的團隊一些幫助，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/39790.html
標籤：JavaScript