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