人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

【JavaScript】 ブログの投稿などで画像リンクをクリックするとテキストエリアに太字用のタグなどが挿入されたりするものがよくありますが、そのスクリプトを具体的に教えてください。過去の質問よりTinyMCEやFCKeditorというものがありましたが、もっと簡単に出来る方法はないでしょうか?

例)[太字]をクリックすると<b></b>とテキストエリアに挿入。

●質問者: tsuntsuku
●カテゴリ:インターネット ウェブ制作
✍キーワード:JavaScript エリア クリック スクリプト タグ
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● ketil
●35ポイント

こんな感じでしょうか。

<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を使用しているので一部のブラウザでしか正しく動作しないという問題があります。

◎質問者からの返答

えーっと、単に[太字]や[斜体]をクリックすると

<b></b>というタグや<i></i>というタグがテキストエリアに挿入されるようにしたいんです。

あとDOCTYPEのXHTML 1.0 Transitional宣言をしても動いてほしいところです。


2 ● Mars
●35ポイント

思いっきり簡単にですと。

<??? onclick="document.getElementById('TEXTAREA01').value+='<b></b>'">
<textare ? id="TEXTAREA01"></textarea>


???の部分はなんでも。
<span onclick="?">[太字]</span>
とか
<img ? alt="[太字]" onclick="?">

マウスで反転したテキストの前後やカーソル位置にタグを挿入したいとなると結構面倒になってきます。

(なので多少余分な機能が付いても既存のライブラリを使った方が楽、かな。)

◎質問者からの返答

反転したテキストに挿入は出来なくていいのですが、カーソル位置への挿入は出来てほしいかなという感じです・・・やはり既存のライブラリを使ったほうがいいんですかね・・・

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ