【dokuwiki】edittableで画像が挿入できないバグ修正方法

dokuwikiのedittableプラグインは表の編集をエクセルライクで行えてとても便利ですよね。

ただ画像の挿入をしようとすると特定のケースでうまく挿入できないバグがあります。この場合メディアマネージャーで「挿入」ボタンを押しても何も挿入されないんですよね…。うんともすんとも言わないというか。

ここではdokuwikiのedittableプラグイン使用時、画像挿入ができないバグの修正方法を紹介します。

1. 注意点：直接コアファイルを編集します
2. 「media.js」を4か所変更
3. コード説明
1. バグの原因
2. ①と④でやってるコト
3. ③でやってるコト
4. ②でやってるコト
4. その他修正案
5. まとめ

注意点：直接コアファイルを編集します

今回のバグ修正では直接dokuwikiのコアファイルを編集するので、そこだけ注意。

例えばdokuwikiのアップデートなどで今回行ったバグ修正が消えちゃったりします。

「media.js」を4か所変更

最初に修正方法から。あとからコードの説明などをしていきたいと思います。

今回4か所変更しますが、ファイルとしては「dokuwiki/lib/scripts/media.js」のみの編集となります。

        dw_mediamanager.image_diff();
        dw_mediamanager.init_ajax_uploader();
+        dw_mediamanager.initform();

	initform: function(){
		let edid = String.prototype.match.call(document.location, /edid=([^&]+)/);
		
		edid = edid ? edid[1] : 0;
		if( edid != 0 ){
			jQuery('#dw__mediasearch').attr('action', jQuery('#dw__mediasearch').attr('action') + "?edid=" + edid );
		}
	},

-        edid = String.prototype.match.call(document.location, /&edid=([^&]+)/);
+        edid = String.prototype.match.call(document.location, /edid=([^&]+)/);
        edid = edid ? edid[1] : 'wiki__text';
        cb = String.prototype.match.call(document.location, /&onselect=([^&]+)/);

                dw_mediamanager.init_ajax_uploader();
                dw_mediamanager.init_options();
+                dw_mediamanager.initform();

これでedittableで表の編集をしているときでも画像の挿入が問題なく行えるようになりました。

コード説明

ここまででedittableとメディアマネージャーに絡んだバグ修正は完了しているので、以降は気になる方だけ読んでみてくださいね。

今回のバグ修正で行ったコード説明をサクッと書いておきます。

バグの原因

まず今回のedittableで画像が挿入できないバグの原因としては、実はedittableは悪くなくてdokuwikiのメディアマネージャーのバグでした。

edittableで画像の挿入ができないケースの条件として、

1. メディアマネージャーで「検索」を行った場合

のケース。

つまり普通に編集画面のツールバーからメディアマネージャーに行き”検索せず”に画像を選択して挿入すれば、バグ修正前でもedittableを使って画像の挿入ができてたんです。

でバグの原因としては、メディアマネージャーが「検索」ボタンを押した際に「どの要素に対して画像を挿入するのか」という変数を忘れてしまうのが原因、だったんですね。

この変数をdokuwikiのメディアマネージャーはクエリストリングの「edid」という変数で保持してるんですが、検索ボタンを押した際のpost通信でedidをサーバーに送っていないので普通にedidがURLから消えてしまうんです。

また名前空間を変更した場合もAjax通信でサーバーから帰ってきたDOMに全部入れ替えてるんでこちらも少々危ない動きをしています（最初はmedia.jsではなくmedia.phpというサーバー側のコードで対応しようとしたのですが、素のままではmedia.php側でAjax時edidの値を取得できずこれを治そうとすると変更点が多くなりすぎると考え断念しました。結局、素のソースコードでedidの値を保持出来てるのがmedia.jsしかなかった）。

①と④でやってるコト

今回の修正では、①がメディアマネージャーの初期化時にformにedidのクエリストリングを追加していて、④がAjaxで帰ってきたDOMに対してedidを追加しています。こうすることで検索ボタンを押しpost通信をした時でもformのactionにedidのクエリストリングが付与されているので、edidが維持されたまま検索が可能になっています。

また④がないと名前空間を変更した際にAjaxで渡されるformのDOMに全部ガラッと変えちゃうコードになっているので、Ajax後に取得したDOMのformのactionにはedidがないままとなってしまいます。なのでこの④も必要なんですよね…。本当、Ajaxで部分的にHTMLパーツを更新してたらいいのに。なんでDOM全とっかえなんだろう。

③でやってるコト

実際に編集画面に画像を挿入しているのがこの③の部分なんですが、変更前はクエリストリングから「&edid=」を検索して見つかればそのDOM要素に画像を挿入するよー、っていうコードになっています。…が、クエリストリングって先頭の1個は「?」から始まりますので、「?」や「&」関係なく「edid=」で検索するように変更しています。

…なんで「&」固定で検索しているのかよくわかりません。

②でやってるコト

②は①と④で読んでいる関数を自作している部分です。

ここで検索フォームのactionの値にedidの値を追加しています。

その他修正案

で、本当はこのバグを治すのはセッション使った方がいいのかなーと思います。

メディアマネージャーが最初ポップアップで開かれた際に、セッションに挿入対象のDOMのIDを格納しておいて、③のタイミングでセッションの値を読みだしてそのDOMに対して画像を挿入すればいいだけ、なんだと思います。

まとめ

今回はdokuwikiのedittableで編集時、画像の挿入がうまくできないバグの修正方法を紹介しました。

まとめるとedittableではなくdokuwikiのメディアマネージャーのプログラムのせいで発生しているバグなのでmedia.jsを数か所修正すれば治る、というコトでした。

参考にしてみてくださいね。