Thanks Ian...
now my problem is with the selected text within a word ...
For instance in Dany999, i select Dany and on click of a Button(Bold) i want Dany to be BOLD . i used the following java script function....
function format_sel(v) {
var str = document.selection.createRange().text;
document.my_form.my_textarea.focus();
var sel = document.selection.createRange();
sel.text = "<" + v + ">" + str + "</" + v + ">" ;
return;
}
i see <b>Dany</b>999 instead of Dany999 where 'Dany' is displayed in Bold .is there a way i can apply Style only for a selected Text or anyother suggestion.
Thanks
My Source Code :
==============
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<SCRIPT>
function mouseover(el) {
el.className = "raised";
}
function mouseout(el) {
el.className = "button";
}
function mousedown(el) {
el.className = "pressed";
}
function mouseup(el) {
el.className = "raised";
}
function format_sel(v) {
var str = document.selection.createRange().text;
document.my_form.my_textarea.focus();
var sel = document.selection.createRange();
alert(sel.text);
sel.text = "<" + v + ">" + str + "</" + v + ">" ;
return;
}
function insert_link() {
var str = document.selection.createRange().text;
document.my_form.my_textarea.focus();
var my_link = prompt("Enter URL:","http://");
if (my_link != null) {
var sel = document.selection.createRange();
sel.text = "<a href=\"" + my_link + "\">" + str + "</a>";
}
return;
}
</SCRIPT>
<style type ="text/css" >
#toolbar {
margin: 0;
padding: 0;
width: 262px;
background: buttonface;
border-top: 1px solid buttonhighlight;
border-left: 1px solid buttonhighlight;
border-bottom: 1px solid buttonshadow;
border-right: 1px solid buttonshadow;
text-align:right;
}
H2 {color:red; font-size:33pt; font-style:italic;}
.my_textarea {
font-family:"Comic Sans MS";
font-size:12px;
background-color:pink;
color:green;
}
.button {
background: buttonface;
border: 1px solid buttonface;
margin: 1;
}
.raised {
border-top: 1px solid buttonhighlight;
border-left: 1px solid buttonhighlight;
border-bottom: 1px solid buttonshadow;
border-right: 1px solid buttonshadow;
background: buttonface;
margin: 1;
}
.pressed {
border-top: 1px solid buttonshadow;
border-left: 1px solid buttonshadow;
border-bottom: 1px solid buttonhighlight;
border-right: 1px solid buttonhighlight;
background: buttonface;
margin: 1;
}
</style>
</HEAD>
<BODY>
<H2> Test </H2>
<form name="my_form">
<div id="toolbar">
<img class="button"
onmouseover="mouseover(this);"
onmouseout="mouseout(this);"
onmousedown="mousedown(this);"
onmouseup="mouseup(this);"
onclick="format_sel('b');"
src="bold.gif"
width="16" height="16"
align="middle"
alt="click to make your selection bold">
<img class="button"
onmouseover="mouseover(this);"
onmouseout="mouseout(this);"
onmousedown="mousedown(this);"
onmouseup="mouseup(this);"
onclick="format_sel('i');"
src="italic.gif"
width="16" height="16"
align="middle"
alt="click to make your selection italic">
<img class="button"
onmouseover="mouseover(this);"
onmouseout="mouseout(this);"
onmousedown="mousedown(this);"
onmouseup="mouseup(this);"
onclick="insert_link();"
src="link.gif"
width="32" height="16"
align="middle"
alt="click to add a link">
</div>
<textarea cols="30" rows="6" id="text" type ="text/html"name="my_textarea" ></textarea>
</form>
</BODY>
</HTML>