1. 背景
ueditor は、Baidu が提供するリッチテキスト編集ボックスとして、その強力な機能で有名です。
著者は最近、この編集ボックスを使用してカスタム印刷形式関数を作成しました。リッチテキスト編集ボックスで印刷形式を設定し、実際に印刷する際にキーワードに応じてデータベース内の情報を置き換えて、リッチテキストの印刷関数を呼び出して印刷します。
作者は 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;
}
コードから、マウスを押すたびに、最初にマーキング ライン (削除) が非表示になり、次にマーキング ライン (追加) が表示されることがわかります。論理的には問題ありませんが、コード行が追加され、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');文コードを非表示にするだけで済みます。
テスト後、テーブルを完全にドラッグできるようになりました。
2. 表の行とテキストの間に大きな隙間がある
表の行と列の自由なドラッグが解決されるため、行と表のテキストの間のスペースが残ります。
分析プロセス
ブラウザの開発者ツールを配置すると、スタイルがあることが簡単にわかります。
td, th {
padding: 5px 10px;
border: 1px solid #DDD;
}
padding属性をチェックすると、表の行とテキストがすぐに一致します。
次に、私たちのタスクは、paddingこの属性が追加される場所を変更することです。
検索するとueditor.all.js、CSS を追加するコードを簡単に見つけることができます。
解決
このコード行を変更して、パディングを 0 または 1 に設定しましょう。
最終的な効果は以下の通りです。
ueditor.parse.js注: 印刷プレビューが編集ボックスに表示されるものと一致するように、変更内の対応するスタイルの位置を同期する必要があります。
3. 結論
これまでのところ、このリッチ テキスト エディターを印刷形式として使用するという当初の目的は完全に満たされています。成熟した印刷形式構成プラグインを使用する場合と比較して、印刷要件が複雑でない場合は、リッチ テキスト編集ボックスを使用して印刷形式テンプレートを設定することも迅速な開発オプションです。
知らせ
上記の置換で ueditor.all.min.js ファイルを使用する場合、そのファイルに対応するコードを同期的に置換する必要があります。