- ベストアンサー
TEXTAREAにワードパッド風の簡易編集機能
時折見かけることがあるのですが、 掲示板などの投稿画面で、 TEXTAREAのフィールドにWindowsのワードパッド風の編集機能がついているものがあります。 見出し、文字の大きさやリンク、画像挿入やリストが挿入できるようなメニューが、入力エリア上部に付属しているようなものです。 この作成の仕方がよくわりません。 JavaScriptで実現しているのはなんとなくわかるのですが、情報の入手先がわかりません。 参考になるサイトや書籍の情報だけでも構いませんので、どなたかご存知の方がいらっしゃいましたら教えていただけませんでしょうか。 よろしくお願い申し上げます。
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (2)
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2280)
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
例えば、こんな感じでボタンを押した時にタグの挿入（選択した部分やカーソル位置に)ができます。 サンプルはボールド<b>とイタリック<i> ---------------------------------------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=SHIFT_JIS"> <title>サンプル</title> <script> <!-- var C_POS=0; //カーソル位置を記録して置く function c_pos(el){ var sel=document.selection.createRange(); var r=el.createTextRange(); var all=r.text.length; r.moveToPoint(sel.offsetLeft,sel.offsetTop); r.moveEnd("textedit"); C_POS=all-r.text.length; } function bold(el){ surround(el, 'b'); } function italic(el){ surround(el, 'i'); } function surround(elobj, elKind){ var str=selectionText(elobj); selectionTextReplace(elobj, "<"+elKind+">" + str + "</"+elKind+">"); } function selectionText(el){ if(document.all){ //IE return document.selection.createRange().text; } else { //Firefox return el.value.substring(el.selectionStart, el.selectionEnd); } } function selectionTextReplace(el, repStr){ if(document.all){ //IE if(document.selection.createRange().text!=""){ document.selection.createRange().text = repStr; } else { el.value = el.value.substring(0, C_POS) + repStr + el.value.substr(C_POS); } } else { //Firefox el.value = el.value.substring(0, el.selectionStart) + repStr + el.value.substr(el.selectionEnd); } } //--> </script> </head> <body> <form name="FORM1"> <input type="button" value="Bold" onclick="bold(this.form.text)"> <input type="button" value="Italic" onclick="italic(this.form.text)"><br> <textarea ID="text" name="text" cols="80" rows="10" onfocus="c_pos(this);" onmouseup="c_pos(this);" onkeyup="c_pos(this);"> test data テストテキスト </textarea> </form> </body> </html>
お礼
ありがとうございます。 そっくりそのまま実行してみて、確認しました。 ただ、これを応用してリストタグなどを実現しようと思うと大変そうなので、何かフリーのJavaScriptライブラリなどをご存知でしたら教えていただけませんでしょうか。 ご丁寧にお教えくださいましたのに、こちらの説明不足で申し訳ありません。
お礼
ありがとうございます。 英語が苦手な私にはなんとも難解ですが、 私が欲しかった情報です。 なんとか自力で組み込んでみようと思います。 ありがとうございました。