テキストエリア内にボタン１つでタグを代入

質問

こんにちは。お世話になっております。
どのカテゴリに投函したらいいか分からず、こちらのjavascriptに投函いたしますが、タイトルにあるように、最近のブログへの投函に良くあるような、記事投函フォームに設置されている、太文字や下線などをボタン一つで入力フォーム内にタグを自動生成出来るものを考えています。

動作確認はしてませんが、作りはこんな感じをイメージしています。
http://tomizawa-web.hp.infoseek.co.jp/sample/HTMLEditor.htm

普段、PHPにてサイトを作っており、javascriptなど他のプログラムについては無頓着ではありますが、参考になるサイトなどでも結構です。アドバイスを頂戴出来れば幸いです。

回答No.1

noname#248942

Webページ上で直接HTMLを編集するのであれば、
<script type="text/javascript">
<!--
var TempDoc;
//-->
</script>

(略)
<form action="～.php" method="post" onsubmit="this.message.value=TempDoc.body.innerHTML;">
<iframe width="100%" height="200px" onload="if(window.createPopup){TempDoc=this.contentWindow.document;TempDoc.body.contentEditable=true;}else{TempDoc=this.contentDocument;TempDoc.designMode='on';}"></iframe>

で、
<button onclick="TempDoc.execCommand('bold')">太字</button>
<button onclick="TempDoc.execCommand('italic')">斜体</button>
<input type="hidden" name="message" value="">
<input type="submit" value="投稿">
</form>
bold,italicのコマンド部分を変えれば、他のスタイルにもできます。
ほかのコマンドは
http://www.mozilla-japan.org/editor/midas-spec.html
で。