selected text
Dr.Gizmo
to make my selected text bold. Here goes the story:
I'm writing some forum application. When the user wants to make bold
some part of his message, he should be able to select part of his
message in the textbox, by dragging the mouse, and then to click on
some image which will start script, which will add <b> selsected_text
</b> on the start of the selecetd text, and so on the end of selected
text. And all this mess to put again in the text box, but now with
bold tags on the start and end of statement.
I know everything else except the script which "knows" which part of
text in a textbox is selected!
Please someone help!
Thanks!
Yep
<style type="text/css">
textarea { width:400px; height:300px; }
</style>
<form onsubmit="return false">
<textarea name="edit">Hello world!</textarea>
<input type="text" value="Hello World" />
<button onclick="makeBold()">Make <b>bold</b></button>
</form>
<script type="text/javascript">
function makeBold() {
var d=document;
if(d.selection && d.selection.createRange) {
var rng=d.selection.createRange(), el=rng.parentElement();
if(!(el && el.type)) return false;
if(el.type.toLowerCase()=="textarea" ||
el.type.toLowerCase()=="text" ){
rng.text = "<b>"+rng.text+"<\/b>";
}
}
}
</script>
This is only for IE, in Mozilla you cannot do it with a TEXTAREA (at
least for the moment). Note that you may want to make supplementary
tests to ensure the HTML created is syntaxically correct.
HTH
Yep.
Richard Cornford
<snip>
><script type="text/javascript">
>function makeBold() {
> var d=document;
> if(d.selection && d.selection.createRange) {
> var rng=d.selection.createRange(), el=rng.parentElement();
>This is only for IE, in Mozilla you cannot do it with a TEXTAREA (at
>least for the moment). Note that you may want to make supplementary
>tests to ensure the HTML created is syntaxically correct.
Having got the selection with - document.selection.createRange - one
option for bolding the text is the IE execCommand method. With that
method IE sorts out the 'syntaxically correct' HTML problem for you (at
least as well as IE ever understands correct HTML). Unfortunately IE
doesn't bold the text by inserting B tags, instead it inserts STRONG
tags. STRONG tags are usually styled with boldface type so that may not
mater appearance wise, but the logic of the HTML is different.
There is a thread in this group with the subject 'Problem with
createRange()' from 2002-10-25.
http://groups.google.com/groups?hl=en&lr=&ie=UTF-8&threadm=2002102505285
7.10597.00000034%40mb-mq.aol.com&rnum=1
That thread contains a number of functions that bold, italic and
underline selections in various ways including the use of execCommand
and Randy's test pages are still at the URLs he quotes.
Richard.
--
Example JavaScript DOM listings for: Opera 7.0b & Mozilla 0.9
<URL: http://www.litotes.demon.co.uk/dom_root.html >
Yep
> Yep wrote in message ...
> <snip>
> ><script type="text/javascript">
> >function makeBold() {
> > var d=document;
> > if(d.selection && d.selection.createRange) {
> > var rng=d.selection.createRange(), el=rng.parentElement();
> <snip>
> >This is only for IE, in Mozilla you cannot do it with a TEXTAREA (at
> >least for the moment). Note that you may want to make supplementary
> >tests to ensure the HTML created is syntaxically correct.
>
>
> Having got the selection with - document.selection.createRange - one
> option for bolding the text is the IE execCommand method. With that
> method IE sorts out the 'syntaxically correct' HTML problem for you (at
> least as well as IE ever understands correct HTML).
<snip />
Since you cannot use rng.execCommand("Bold") in a TEXTAREA (AFAICS),
this would mean that instead of bolding the text while editing the OP
may offer a "preview" area (DIV) with the opportunity to make
formatting enhancements after the edition, like bolding; this would
indeed enable execCommand("Bold") and hopefully also permit some
Mozilla support, at a higher cost though.
>
> There is a thread in this group with the subject 'Problem with
> createRange()' from 2002-10-25.
>
> http://groups.google.com/groups?hl=en&lr=&ie=UTF-8&threadm=2002102505285
> 7.10597.00000034%40mb-mq.aol.com&rnum=1
>
Already referenced :-)
Cheers,
Yep.
Richard Cornford
<snip>
>this would mean that instead of bolding the text while editing the OP
>may offer a "preview" area (DIV) with the opportunity to make
>formatting enhancements after the edition, like bolding; this would
>indeed enable execCommand("Bold") and hopefully also permit some
>Mozilla support, at a higher cost though.
<snip>
Yes, IE 4 does allow execCommand on TEXTAREA element selections but IE 6
would not do it.
I thought about the 'preview' idea and wondered how practical it would
be to toggle between a preview and a textarea, so I had a quick go.
Richard.
(Obviously, this is IE (probably 4+) Only. But I could not test on IE
5.0 or 5.5)
<HTML>
<HEAD>
<TITLE>IE Only</TITLE>
<script LANGUAGE="JavaScript" TYPE="text/javascript">
var formatDiv = null, editArea = null;
var edtMode = true;
function setUpRefs(){
if(document.getElementById){
formatDiv = document.getElementById('fmtDiv');
}else if(document.all){
formatDiv = document.all.item('fmtDiv');
}
if(formatDiv){
var obj = document.forms['frm'].elements['edtArea'];
formatDiv.style.width = (obj.offsetWidth+2)+'px';
formatDiv.style.height = (obj.offsetHeight+2)+'px';
}
}
function formatSelection(type){
var rng = document.selection.createRange();
if((rng)&&(rng.text != ''))rng.execCommand(type);
}
function toggleMide(){
if(!formatDiv)setUpRefs();
if(formatDiv){
if(edtMode){
formatDiv.innerHTML =
document.forms['frm'].elements['edtArea'].value;
document.forms['frm'].elements['bld'].style.display = '';
document.forms['frm'].elements['uln'].style.display = '';
document.forms['frm'].elements['itl'].style.display = '';
document.forms['frm'].elements['tgl'].value = ' Edit ';
edtMode = false;
}else{
var st = formatDiv.innerHTML;
formatDiv.innerHTML =
'<textarea cols="40" rows="20" name="edtArea"><\/textarea>';
document.forms['frm'].elements['edtArea'].value = st;
document.forms['frm'].elements['bld'].style.display = 'none';
document.forms['frm'].elements['uln'].style.display = 'none';
document.forms['frm'].elements['itl'].style.display = 'none';
document.forms['frm'].elements['tgl'].value = 'Format';
edtMode = true;
}
}
}
</script>
</HEAD>
<body>
<form name="frm">
<div id="fmtDiv">
<textarea cols="40" rows="20" name="edtArea">
Textarea contens. Textarea contens. Textarea contens.
Textarea contens. Textarea contens. Textarea contens.
Textarea contens. Textarea contens. Textarea contens.
Textarea contens. Textarea contens. Textarea contens.
</textarea>
</div>
<br>
<input type="button" value="Format"
onClick="toggleMide()" name="tgl">
<input type="button" value="B" name="bld"
onMouseDown="formatSelection('Bold');" style="display:none;">
<input type="button" value="U" name="uln"
onMouseDown="formatSelection('Underline');" style="display:none;">
<input type="button" value="I" name="itl"
onMouseDown="formatSelection('Italic');" style="display:none;">
</form>
</body>
</html>
Dr.Gizmo
I have some advice for all who dot't want to use strong tags in their
pages.
In my case, when user post message in the forum, code will be added in
DB. So i'm going to use replace() function (ASP), and replace all
strong tags with bold tags, and the problem solwed!