の記事で Java Script を掲載したのですが、テキストエディタで一気に置換するものの元のファイルを変換しては困るのでファイルのコピーを取っておいて・・・とやる訳です。
これだけでは PRE と変わりませんので種類に table を指定した場合は行番号を付加するようにし(OFFにすることもできます) UL や OL などの出力もできるようにしたり、CSV を指定するとカンマ区切りのデータをから table を生成したりします。
下記がサンプルです。と言っても置換された状態で出ていますので効果はわからないかもしれませんが、CASTBOX タグに囲まれた間は一切手を入れていない生の Java Script です。
1 | <script type="text/JavaScript"> |
2 | <!-- |
3 | var offsetX; |
4 | var offsetY; |
5 | var obj; //ラッグオブジェクト |
6 | var mbox; //マウスカーソルに追従する div オブジェクト |
7 | var tarbox; //ドロップ先を識別する為の string |
8 | |
9 | function isIE() |
10 | { |
11 | if (document.all) { |
12 | return 1; //IE です。 |
13 | } else { |
14 | if (document.getElementsByTagName) { |
15 | return 2; //IE以外です。 |
16 | } else { |
17 | return 0; //不明です。 |
18 | } |
19 | } |
20 | } |
21 | |
22 | function getscrollLen() |
23 | { |
24 | var pos = new Object(); |
25 | pos.x = document.documentElement.scrollLeft || document.body.scrollLeft; |
26 | pos.y = document.documentElement.scrollTop || document.body.scrollTop; |
27 | return pos; |
28 | } |
29 | |
30 | onload=function () |
31 | { |
32 | switch ( isIE() ) { |
33 | case 0: return; break; //分からないので止める。 |
34 | case 1: objs = document.all.tags("td"); break; //IE用にタグ取得 |
35 | case 2: objs = document.getElementsByTagName("td"); //IE以外用のタグ取得 |
36 | } |
37 | //オブジェクト(エレメント)のリストより、ID に "MAILID" が含まれているタグのみ oMouseDown をセットします。 |
38 | //これはドラッグ元を識別する為の処理です。 |
39 | for (i=0; i<objs.length; i++) |
40 | { |
41 | if (objs[i].id.indexOf("MAILID") != -1) { |
42 | objs[i].onmousedown = onMouseDown; |
43 | } |
44 | } |
45 | //ドキュメント全体に onMouseMove / OnMouseUp を設定します。 |
46 | document.onmousemove = onMouseMove; |
47 | document.onmouseup = onMouseUp; |
48 | } |
49 | |
50 | function onMouseDown(el) |
51 | { |
52 | //クリックした際にドロップ先指定を初期化します。 |
53 | //これはドロップ先のボタンにマウスカーソルを当てた場合にもセットされる為です。 |
54 | //マウスを離した際にのみセットをしたい為、このような処理を行っています。 |
55 | // |
56 | tarbox = ""; |
57 | document.mailddform.MOVEBOXNAME.value = ""; |
58 | |
59 | //マウス追従用の div オブジェクトを取得します。 |
60 | mbox = document.getElementById("miconid"); |
61 | //クロスブラウザ用に、ドラッグしたオブジェクトを確保します。 |
62 | obj = this; |
63 | |
64 | if (mbox) { |
65 | document.body.style.cursor = "crosshair"; //マウスカーソルの形状を変更。 |
66 | mbox.style.visibility = "visible"; //追従用の div を表示。 |
67 | |
68 | //以下は無くても良いのですが、クリックした時点で追従用の div 位置をマウス位置に設定します。 |
69 | switch ( isIE() ) |
70 | { |
71 | case 0: return true; break; |
72 | case 1: offsetX = event.offsetX + 10; offsetY = event.offsetY + 3; break; |
73 | case 2: offsetX = el.pageX+10; offsetY = el.pageY+3; break; |
74 | } |
75 | //Firefox では数値を直接入れてもパースがどうこうエラーがでますので、"px" を追加し、pixel と識別させます。 |
76 | mbox.style.left = offsetX + "px"; |
77 | mbox.style.top = offsetY + "px"; |
78 | } |
79 | return false; |
80 | } |
81 | |
82 | function onMouseMove(el) |
83 | { |
84 | //mbox が存在する場合は、マウスカーソルに mbox (追従用 div)をくっつけて移動させます。 |
85 | //上にもありますが、3 とか 10 はずらすための数値です。マジックナンバーは良くないので |
86 | //変数で定義した方が良いと思います。 |
87 | if (mbox) { |
88 | switch ( isIE() ) |
89 | { |
90 | case 0: break; |
91 | case 1: |
92 | mbox.style.left = event.clientX + 10 + getscrollLen().x; |
93 | mbox.style.top = event.clientY + 3 + getscrollLen().y; |
94 | break; |
95 | case 2: |
96 | mbox.style.left = el.pageX + 10 +"px"; |
97 | mbox.style.top = el.pageY + 3 +"px"; |
98 | break; |
99 | } |
100 | return false; |
101 | } else { |
102 | return true; |
103 | } |
104 | } |
105 | |
106 | function onMouseUp(el) |
107 | { |
108 | //カーソルを戻します。 |
109 | document.body.style.cursor = "auto"; |
110 | if (mbox && obj) { |
111 | if (tarbox!="") { |
112 | //substring を利用して必要な情報を取り出します。 |
113 | //ドラッグ元の ID を識別させる為のキーとデータをセットにしている訳です。 |
114 | //ドラッグ元に value で値を持てる物を利用している場合はそちらを利用すれば良いですが、無い場合は |
115 | //このような方法で処理を行っています。 |
116 | document.mailddform.MAILID.value = obj.id.substring(6,obj.id.length); |
117 | alert("ドロップしました。"); |
118 | } |
119 | //追従用 div を消して、他のオブジェクト等を初期化します。 |
120 | mbox.style.visibility = "hidden"; |
121 | mbox = null; |
122 | obj = null; |
123 | tarbox=""; |
124 | } |
125 | } |
126 | |
127 | function onBoxName(mmbox) |
128 | { |
129 | tarbox = mmbox; |
130 | document.mailddform.MOVEBOXNAME.value = mmbox; |
131 | } |
132 | |
133 | function onBoxOut() |
134 | { |
135 | tarbox = ""; |
136 | document.mailddform.MOVEBOXNAME.value = ""; |
137 | } |
138 | |
139 | --> |
140 | </script> |