React舊版的生命周期 初始化階段：由ReactDOM.render()觸發 初次渲染 1.constructor() 2.componentWillMount() 3.render() 4.componentDidMount() 一般在這個裡面做一些初始化的事情，如定時器，發送網路請求，訂閱消息 ...
背景
ueditor作為百度推出的富文本編輯框，以功能強大著稱。
筆者最近用這個編輯框做了一個自定義列印格式的功能。允許用戶在富文本編輯框中設定列印格式，再實際列印時，根據關鍵字替換資料庫中信息，然後調用富文本的列印功能進行列印。
筆者是集成在vue中使用的，用的版本為"vue-ueditor-wrap": "^2.5.6"
但是在設置列印格式的時候，筆者及客戶都發現該文本編輯框，推動表格時不宜拖動，除第一次拖動外，之後每次拖動，表格的寬度根本不動。且表格的行高太高，與文字之前有很大間距。
解決表格寬度不易拖動的問題
為瞭解決該問題，筆者對ueditor的源碼ueditor.all.js進行了研究。
分析過程
發現在表格邊框拖動的方法tableBorderDrag中，有以下幾行代碼,並經過代碼分析及跟蹤。各代碼作用註釋如下
//邊框拖動
function tableBorderDrag( evt ) {
//隱藏拖動標識線
hideDragLine(me);
//顯示拖動標識線
getDragLine(me, me.document);
me.fireEvent('saveScene');
//設置拖動標識線的位置
showDragLineAt(state, startTd);
//設置滑鼠按下的標識
mousedown = true;
//拖動開始
onDrag = state;
//拖動時選中的單元格
dragTd = startTd;
}
從代碼可知，每次滑鼠按下時，都是先隱藏標示線(remove)，之後再顯示標識線(add)。從邏輯來說沒問題，但註意，其中加了一行代碼me.fireEvent('saveScene') 該代碼觸發了編輯框的自動保存事件。
又經過代碼分析，發現最終觸發了編輯框的contentchange事件。
contentchange事件的代碼如下。
//內容變化時觸發索引更新
//todo 可否考慮標記檢測，如果不涉及表格的變化就不進行索引重建和更新
me.addListener("contentchange", function () {
var me = this;
//儘可能排除一些不需要更新的狀況
hideDragLine(me);
if (getUETableBySelected(me))return;
var rng = me.selection.getRange();
可以看到，該事件，同樣調用了hideDragLine方法，由此可知，拉寬表格時，表格拖動標識線經過了 先刪除、在新增、再刪除的過程。所以我們的拖動不起作用。
解決方法
好了，那麼我們只需要把tableBorderDrag函數中的me.fireEvent('saveScene');這一個句代碼隱藏掉即可。
經測試，表格已經可以完美拖動了。
表格的行與文字之前有很大間距問題
表格行列的自由拖動解決了，那麼還剩下表格的行與文字之間的間距。
分析過程
經過瀏覽器的開發者工具定位，很容易發現存在一個樣式
td, th {
padding: 5px 10px;
border: 1px solid #DDD;
}
把padding屬性勾選掉之後，我們表格線與文字立馬貼合了。
那麼我們的任務就是把這個padding屬性添加的地方改掉即可。
在ueditor.all.js搜索後，很容易定位到添加CSS的代碼
解決方法
我們把這個行代碼改掉，把padding設置為0或者1即可。
最終效果如圖：
註意：需要同步修改ueditor.parse.js中的對應的樣式位置，用於列印預覽與編輯框中展示的一致。
結語
至此，已經完美滿足我們用這個富文本編輯器作為列印格式使用的初衷。相比於使用成熟的列印格式配置插件，在列印需求不複雜的情況下，使用富文本編輯框做列印格式模版設置，也是一個快速開發的選擇。
註意
上述替換如果使用的是ueditor.all.min.js文件，還需要同步替換該文件對應的代碼。
