Karappo web design room

ブログなんかでよくみかけるJavaScriptを利用したタグ挿入機能。
Nucleusのソースから必要な箇所だけ抜き出してみた。
Mozilla系ブラウザへの対応で、とても複雑になっている。
だが、これでもMacIEでは選択範囲がうまく取れずに最後尾にタグが挿入されるバグがある（当然Nucleusでも解決されていない）。


こんなかんじ

JavaScript

function ahrefThis() {

	if (document.selection)

		strSelection = document.selection.createRange().text;

	else

		strSelection = '';

		

	strHref = prompt("Create a link to:","http://");

	if (strHref == null) return;

	

	var textpre = "<a href=\"" + strHref.replace(/&/g,'&') + "\">";

	insertAroundCaret(textpre, "</a>");

}



// stores the caret

var lastSelected, lastCaretPos;

function storeCaret (textEl) {



	// store caret

	if (textEl.createTextRange) 

		lastCaretPos = document.selection.createRange().duplicate();



	// also store lastselectedelement

	lastSelected = textEl;

	

	nonie_FormType = textEl.name;



	scrollTop = textEl.scrollTop;

}





// inserts text at caret (overwriting selection)

function insertAtCaret (text) {

	var textEl = lastSelected;

	if (textEl && textEl.createTextRange && lastCaretPos) {

		var caretPos = lastCaretPos;

		caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == ' ' ? text + ' ' : text;

	} else if (!document.all && document.getElementById) {

		mozReplace(document.getElementById('input' + nonie_FormType), text);

		if(scrollTop>-1) {

			document.getElementById('input' + nonie_FormType).scrollTop = scrollTop;

		}

	} else if (textEl) {

		textEl.value  += text;

	} else {

		document.getElementById('input' + nonie_FormType).value += text;		

		if(scrollTop>-1) {

			document.getElementById('input' + nonie_FormType).scrollTop = scrollTop;

		}

	}

	updAllPreviews();

}



// inserts a tag around the selected text

function insertAroundCaret (textpre, textpost) {

	var textEl = lastSelected;

	

	if (textEl && textEl.createTextRange && lastCaretPos) {

		var caretPos = lastCaretPos;

		caretPos.text = textpre + caretPos.text + textpost;

	} else if (!document.all && document.getElementById) {

		mozWrap(document.getElementById('input' + nonie_FormType), textpre, textpost);

		if(scrollTop>-1) {

			document.getElementById('input' + nonie_FormType).scrollTop = scrollTop;

		}

	} else {

		document.getElementById('input' + nonie_FormType).value += textpre + textpost;

		if(scrollTop>-1) {

			document.getElementById('input' + nonie_FormType).scrollTop = scrollTop;

		}

	}



	updAllPreviews();

}





/* some methods to get things working in Mozilla as well */

function mozWrap(txtarea, lft, rgt) {

	var selLength = txtarea.textLength;

	var selStart = txtarea.selectionStart;

	var selEnd = txtarea.selectionEnd;

	if (selEnd==1 || selEnd==2) selEnd=selLength;

	var s1 = (txtarea.value).substring(0,selStart);

	var s2 = (txtarea.value).substring(selStart, selEnd)

	var s3 = (txtarea.value).substring(selEnd, selLength);

	txtarea.value = s1 + lft + s2 + rgt + s3;

}

function mozReplace(txtarea, newText) {

	var selLength = txtarea.textLength;

	var selStart = txtarea.selectionStart;

	var selEnd = txtarea.selectionEnd;

	if (selEnd==1 || selEnd==2) selEnd=selLength;

	var s1 = (txtarea.value).substring(0,selStart);

	var s2 = (txtarea.value).substring(selStart, selEnd)

	var s3 = (txtarea.value).substring(selEnd, selLength);

	txtarea.value = s1 + newText + s3;

}

function mozSelectedText() {

	var txtarea = document.getElementById('input' + nonie_FormType);

	var selLength = txtarea.textLength;

	var selStart = txtarea.selectionStart;

	var selEnd = txtarea.selectionEnd;

	if (selEnd==1 || selEnd==2) selEnd=selLength;

	return (txtarea.value).substring(selStart, selEnd);

}

リンク挿入ボタン

<input type="button" value="リンク挿入" onClick="ahrefThis()">

テキストエリア

<textarea 

		name="body" id="inputbody" 

		onkeyup="storeCaret(this); updPreview('body');"

		onclick="storeCaret(this);"

		onselect="storeCaret(this);" 

		tabindex="20" cols="60" rows="20">

</textarea>

↑

※注意

idの名前は、name属性と統一する。
つまり、
name="text"　→　id="inputtext"
name="name" → id="inputname"
といった感じ。

2006.07.25 mio