How do I make highlighted text in a textarea be bold?

Forum Moderators: open

Message Too Old, No Replies

How do I make highlighted text in a textarea be bold?

Danielle

3:55 pm on Feb 4, 2004 (gmt 0)

I have a form with a textarea element where a user can enter text. Is it possible to do something with javascript which allows the user to be able to select part of the text in the box and either make that selection bold, italic or add a colour? If so any ideas/help would be much appreciated!
Dani

DrDoc

5:19 pm on Feb 4, 2004 (gmt 0)

Welcome to Webmaster World!
No, it is not possible to do what you're asking. Even though there are various WYSIWYG solutions out there, they usually don't work in anything but IE (and very poorly at that). If you are looking for a reliable solution I'm afraid there's nothing but Java applets and Flash that can help you. Especially where cross browser functionality is of importance.

RonPK

6:45 pm on Feb 4, 2004 (gmt 0)

Hi Danielle,
In case you're not looking for a WYSIWYG solution but for a script that merely puts tags around a selection in a textarea, try this:

<script type="text/javascript">
function saveCurRng() {
 curRng = document.selection.createRange().duplicate();
}
function surround(btag, etag){
 if (curRng) {
 document.editform.article.focus();
 curRng.text= btag + curRng.text + etag;
return false;
 }
}
</script>
</head>
<body>
<form name="editform">
<textarea rows=5 cols=40 name="article" onKeyup="saveCurRng()" onMouseup="saveCurRng()"></textarea>
</form>
<a href="#" onclick="return surround('<b>', '</b>');">bold</a><br>
<a href="#" onclick="return surround('<i>', '</i>');">italic</a>

Unfortunately, this only works in IE.

Danielle

11:30 am on Feb 5, 2004 (gmt 0)

Thanks for your replies, guys!
unfortunately I was looking for a wysiwyg solution...
surfing on the net I read somewhere I should try with an iframe...I found two scripts that could do the job, but I need someone to put them together...could you do it for me?
thanks guys!
danielle

first script:

<html>
<head>
<script language="javascript" type="text/javascript">

</script>
</head>
<body>
<form name="theform" id="theform">
Highlight Text then click a button<br>
<input type=button name=bold value=bold onClick="replacesingle(theform,newsletter,'b',this)">
<input type=button name=italic value=italic onClick="replacesingle(theform,newsletter,'i',this)">
<input type=button name=bullet value=bullet onClick="replacesingle(theform,newsletter,'li',this)">
<select name="color" id="color" onchange="replacesingle(theform,newsletter,'font',this)">
<option selected>Color Chooser</option>
<option value="color,FF0000" style="background-color:#FF0000;"></option>
<option value="color,00FF00" style="background-color:#00FF00;"></option>
<option value="color,0000FF" style="background-color:#0000FF;"></option>
</select><br>
<textarea name="newsletter" id="newsletter">this is a text</textarea>
</body>
</html>

second:

<td colspan=2 align="center">
<div id="cdiv" style='position:relative; left:0px; top:0px; height:314px; width:603px;border:solid 1px #9C9C9C;'>
<textarea name="body" wrap="soft" style='visibility:visible; z-index:100; position:absolute; left:0px; top:0px; height=100%; width=100%'>Testo Testo Testo </textarea>
<IFRAME SRC="/cgi-bin/dasp/EN/rte.asp" id='richedit' style='visibility: hidden; position: absolute; left: 0px; top: 0px; height=100%; width=100%'></IFRAME>
</div>
</td>