2004年11月11日

文字編集ボタンをつける

CGIなどカスタマイズして文字編集ボタンをつけるワザ。
フリー配布のCGIを使ってて、HTML部分をちょこちょこ変更するくらいならできるひと向け。
(SeeSaaの編集フォームで使ってるののマネっこですが)

1)編集フォーム部分を探す。
CGIをエディタで開いて、<textarea>を検索すると見つかりやすいかも。

2)下記のスクリプトとボタンを<textarea>の前に付け足す。

<script type="text/javascript">
function tag(TAG){
 if (! document.selection) return;
 var SELECTED = document.selection.createRange();
 if (! SELECTED.text) return;
 SELECTED.text = 
  '<' + TAG + '>' + SELECTED.text + '</' + TAG + '>';
 }
function Size(SIZE){
 if (! document.selection) return;
 var SELECTED = document.selection.createRange();
 if (! SELECTED.text) return;
 SELECTED.text =
  '<span style="font-size:' + SIZE + '">' + SELECTED.text + '</span>';
 }
function Link(){
 if (! document.selection) return;
 var SELECTED = document.selection.createRange();
 if (! SELECTED.text) return;
 if (clipboardData.getData('text')) {
  linktext = clipboardData.getData('text');
  if (linktext.match(/^http:/)) {
   URL = window.prompt("リンク先URL", linktext);
  } else {
   URL = window.prompt("リンク先URL", "http://");
  }
 } else {
  URL = window.prompt("リンク先URL", "http://");
 }
 if (URL == null) {
  return false;
 } else {
  SELECTED.text = 
   '<a href="' + URL + '" target="_blank">' + SELECTED.text + '</a>';
 }
}
 -->
</script>
<input type="button" value="強調" onclick="tag('strong')">
<input type="button" value="大" onclick="Size('large')">
<input type="button" value="小" onclick="Size('small')">
<input type="button" value="リンク" onclick="return Link()">
<br>
リンクの場合、クリップボードにhttpから始まる文字列があれば自動でプロンプトに入ります。

これはとりあえずstrongとフォントサイズの大小、リンクだけですが、応用すればルビ振ったり右寄せしたり左寄せしたり取り消しにしたりいろいろいけます。 strongやblockquoteのように属性値なしで使えるものなら、onclick=tag()のカッコ内にシングルコーテーションつけて要素名入れればOK。

Win2000+IE6での動作検証は済んでますが、それ以外の環境で動く保証はしません。不具合ありましたらお気軽にどーぞ。 それと、これをつけたからCGIが壊れたと言われましても責任は持てませんので、ご了承ください。
posted by 文月夕 at 19:19| Comment(0) | TrackBack(0) | web技 | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック

PR

×

この広告は1年以上新しい記事の投稿がないブログに表示されております。