背景
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檔案，還需要同步替換該檔案對應的代碼，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/547967.html
標籤：其他
上一篇：React的生命周期