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


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

回答の条件
  • 1人2回まで
  • 登録:
  • 終了:2007/10/21 03:56:46
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

回答2件)

id:ketil No.1

回答回数4ベストアンサー獲得回数0

ポイント35pt

こんな感じでしょうか。

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

id:tsuntsuku

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

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

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

2007/10/20 00:43:08
id:Mars No.2

回答回数203ベストアンサー獲得回数20

ポイント35pt

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

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


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

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

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

id:tsuntsuku

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

2007/10/20 13:40:11

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません