moonwalker: code in a "selfmade" editor

Beitrag lesen

hey,

i am building a editor which allows the user to enter a 'code' in a textarea field via a popup dialog window. creating code in the textarea works fine. but my goal is it to create the code between a selected text in the textarea. (like this editor where i enter this hole text)

my code looks like this:

<html>  
<head>  
        <script type="text/javascript">  
	/* <![CDATA[ */  
	function FontColor (textarea) {  
		var textareaid = textarea;  
		var input = document.getElementById(textareaid);  
		var w = screen.availWidth;  
		var h = screen.availHeight;  
		var wW = 300, wH = 122;  
		var leftPos = (w - wW) / 2, topPos = (h - wH) / 2;  
		if (navigator.appName == "Microsoft Internet Explorer") {  
			var myText = window.showModalDialog (  
				'color.html',  
				'name',  
				'dialogWidth:300px; dialogHeight:154px; scroll:no; status:no;'  
			);  
		} else {  
			var myText = window.open (  
				'color.html',  
				'name',  
				'location = 0, status = 0, scrollbars = 0, width = ' + wW + ', height = ' + wH + ', top = ' + topPos + ', left = ' + leftPos  
			);  
		}  
		var selectedText = document.selection.createRange().text;  
		if (selectedText != "") {  
			var newText = myText + selectedText + "";  
			document.selection.createRange().text = newText;  
		} else {  
			input.focus(input.caretPos);  
			input.caretPos = document.selection.createRange().duplicate();  
			if(input.caretPos.text.length == 0) {  
				input.caretPos.text = myText + "";  
			}  
		}  
	}  
	  
	function FontColor_update_FF (hexcode) {  
		var textareaid = 'area51';  
		var input = document.getElementById(textareaid);  
		var tagBeginning = hexcode;  
		var tagEnding = "";		  
		if (input.setSelectionRange) {  
			input.value = input.value.substring (0, input.selectionStart)  
			+ tagBeginning  
			+ input.value.substring(input.selectionStart,input.selectionEnd)  
			+ tagEnding  
			+ input.value.substring(input.selectionEnd,input.value.length)  
		}  
		input.focus();  
	}  
	/* ]]> */  
	</script>  
</head>  
<body>  
	<div>	  
		<img title="Selected Color" src="images/forecolor.gif" onclick="FontColor('area51');" alt="" />  
	</div>  
	<div>  
		<textarea id="area51"></textarea>  
	</div>  
</body>  
</html>

and the code of the popup window looks so:

<html>  
<head>  
	<script language="javascript">  
	/* <![CDATA[ */  
	function ColorDialog () {  
		for (i = 0; i <= 3; i++) {  
			if (document.colors.color[i].checked) {  
				var code = document.colors.color[i].value;  
			}	  
		}  
  
		var color = '[color:' + code + '][/color]';  
		  
		if (navigator.appName == "Microsoft Internet Explorer") {	  
			window.returnValue = color;  
		} else {  
			window.opener.FontColor_update_FF(color);  
		}	  
		window.close();  
	}  
	/* ]]> */  
	</script>  
</head>  
<body>  
	<div>  
		<form name="colors">  
			<input type="radio" name="color" value="12" />red  
			<input type="radio" name="color" value="23" />blue  
			<input type="radio" name="color" value="34" />green  
			<input type="radio" name="color" value="45" />black  
		</form>  
	</div>  
	<div>  
		<input type="button" value="Select" onclick="ColorDialog ();">  
	</div>  
</body>  
</html>

i hope someone can help me

best wishes, moonwalker