例)[太字]をクリックすると<b></b>とテキストエリアに挿入。
こんな感じでしょうか。
<html> <head> <title>title</title> <script type="text/javascript"><!-- function f0(){ if(document.getElementById('sumple').style.fontWeight!='bold') document.getElementById('sumple').style.fontWeight="bold"; else document.getElementById('sumple').style.fontWeight="normal"; } function f1(obj){ document.getElementById('sumple').innerText=obj; } function f2(){ var tmp=document.getElementById('sumple'); document.getElementById('InputArea').innerHTML+= (tmp.style.fontWeight=='bold'?"<b>":"") +tmp.innerText +(tmp.style.fontWeight=='bold'?"</b>":""); } //--></script> </head> <body> <form name="webLog" src="./null.txt" onsubmit="return false"> <img src="./bold.png" alt="太字" onmouseover="style.cursor='hand'" onmouseout="style.cursor='normal'" onclick="f0()"> <input type="text" value="追加したい文字列" name="addText" onchange="f1(this.value)"><br> <span id="sumple">追加したい文字列</span><input type=button value="追加" onclick="f2()"><br> <textarea name="InputArea" rows=5 cols=100></textarea> </form> </body> </html>
この方法だとgetElement~やinnerText,innerHTMLを使用しているので一部のブラウザでしか正しく動作しないという問題があります。
思いっきり簡単にですと。
<??? onclick="document.getElementById('TEXTAREA01').value+='<b></b>'"> <textare ~ id="TEXTAREA01"></textarea> ???の部分はなんでも。 <span onclick="~">[太字]</span> とか <img ~ alt="[太字]" onclick="~">
マウスで反転したテキストの前後やカーソル位置にタグを挿入したいとなると結構面倒になってきます。
(なので多少余分な機能が付いても既存のライブラリを使った方が楽、かな。)
反転したテキストに挿入は出来なくていいのですが、カーソル位置への挿入は出来てほしいかなという感じです・・・やはり既存のライブラリを使ったほうがいいんですかね・・・
えーっと、単に[太字]や[斜体]をクリックすると
<b></b>というタグや<i></i>というタグがテキストエリアに挿入されるようにしたいんです。
あとDOCTYPEのXHTML 1.0 Transitional宣言をしても動いてほしいところです。