PDA

View Full Version : how do i make a bold, italic, underline command



skat
Feb 25th, 2008, 10:18 PM
hi,
i am trying to make my website so that when i click on a button it makes the selected text into bold or when i click another button it makes the selected text italic and finally when a thrid button is clicked it makes it underlined. i have tried searching for a way of doing this throught javascript but i cant seem to find any.

any suggestions or examples on how i can achieve this would be much appreciated as i really need to get this working,
thanks for any advice given

Philip M
Feb 26th, 2008, 07:36 AM
Try this:-


<script type="text/javascript">

function formatText (tag) {
var selectedText = document.selection.createRange().text;

if (selectedText != "") {
var newText = "<" + tag + ">" + selectedText + "</" + tag + ">";
document.selection.createRange().text = newText;
}
}

</script>

<form name="myForm">
<textarea name="myTextarea" rows = "12" cols = "50">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</textarea><br>
<input type="button" value="Bold" onclick="formatText ('b');" />
<input type="button" value="Italic" onclick="formatText ('i');" />
<input type="button" value="Underline" onclick="formatText ('u');" />
</form>

"There is no reason anyone would want a computer in their home." — Ken Olson, President/founder of Digital Equipment Corp., 1977.

skat
Feb 27th, 2008, 08:29 PM
hi,
thanks a lot for your reply, it was useful

Kor
Feb 28th, 2008, 08:56 AM
Philip M, that is an IE only solution. Here's a cross browser code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
function formatText (el,tag) {
var selectedText=document.selection?document.selection.createRange().text:el.value.substring(el.selectio nStart,el.selectionEnd);
if (selectedText!='') {
var newText='<'+tag+'>'+selectedText+'</'+tag+'>';
el.value=el.value.replace(selectedText,newText)
}
}
</script>
</head>
<body>
<form name="myForm">
<textarea name="myTextarea" rows = "12" cols = "50">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</textarea><br>
<input type="button" value="Bold" onclick="formatText (myTextarea,'b');" />
<input type="button" value="Italic" onclick="formatText (myTextarea,'i');" />
<input type="button" value="Underline" onclick="formatText (myTextarea,'u');" />
</form>
</body>
</html>

eksob
Feb 29th, 2008, 02:18 PM
What about code to just underline a text link?

Here is an example. I have two text links, they are using Ajax to pull up data and put into a span ID.

TextLink1 pulls up Data1 and TextLink2 pulls up Data2. When you click on TextLink1 I want it to underline the href link and TextLink2 is not underline. Vica versa for TextLink2, when you click on Textlink2 it pulls up Data2 and Textlink2 is underlined while TextLink1 is not.

Kor
Feb 29th, 2008, 03:23 PM
This is not quite related with this topic, but here you are:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
function switchUnder(obj){
var ids=['link1','link2'], i=0, id;
while(ID=ids[i++]){
document.getElementById(ID).style.textDecoration='none';
}
obj.style.textDecoration='underline';
}
</script>
</head>
<body>
<span id="link1" onclick="switchUnder(this)">TextLink1</span>
<br>
<br>
<span id="link2" onclick="switchUnder(this)">TextLink2</span>
</body>
</html>

eksob
Feb 29th, 2008, 03:53 PM
Thanks, I actually found my answer a little after I posted.

here is what I got


document.getElementById('link1').style.textDecoration = "none";
document.getElementById('link2').style.textDecoration = "underline";

<a id="link1" href="javascript:loadContent('cont1');">
<a id="link2" href="javascript:loadContent('cont2');">

syn4k
Jul 8th, 2008, 01:00 AM
This is cool code but it doesn't work if the text you are wishing to select is repeated.

For instance, if I have the text "test test" and I make this bold, then, later on in the page, I have "test test" again and I want to make this bold as well, the first occurance gets the <b></b> tags twice!

Kor
Jul 8th, 2008, 07:52 AM
Well, yes. I have notice that later and found a solution, but I forgot to update the thread. Sorry for that.

Here's my new variant (tested in IE6, IE7, FF3, Opera 9 / XP SP2):


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
function formatText(el,tag){
var selectedText=document.selection?document.selection.createRange().text:el.value.substring(el.selectio nStart,el.selectionEnd);// IE:Moz
var newText='<'+tag+'>'+selectedText+'</'+tag+'>';
if(document.selection){//IE
document.selection.createRange().text=newText;
}
else{//Moz
el.value=el.value.substring(0,el.selectionStart)+newText+el.value.substring(el.selectionEnd,el.value .length);
}
}

</script>
</head>
<body>
<form name="myForm">
<textarea name="myTextarea" rows = "12" cols = "50">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</textarea><br>
<input type="button" value="Bold" onclick="formatText (myTextarea,'b');" />
<input type="button" value="Italic" onclick="formatText (myTextarea,'i');" />
<input type="button" value="Underline" onclick="formatText (myTextarea,'u');" />
</form>
sdsd
</body>
</html>

syn4k
Jul 15th, 2008, 09:39 PM
Thanks Kor:thumbsup: however, it still doesn't work :(
I put in a request over at http://www.experts-exchange.com/Programming/Open_Source/Q_23567546.html for a fix on this issue.

syn4k
Jul 15th, 2008, 11:09 PM
My bad...that works perfectly. I guess my browser was caching the old version still...

Here is the updated code I came up with:


/**
* Replace selected elments with the element wrapped in a <tag></tag>
* This function is supposed to be cross-platform
* This function copied from http://codingforums.com/showthread.php?t=134113
*
* @return void
*/
function formatText(el,tag) {
var selectedText=document.selection?document.selection.createRange().text:el.value.substring(el.selectio nStart,el.selectionEnd);// IE:Moz
var newText='<'+tag+'>'+selectedText+'</'+tag+'>';
// Do IE compatible replacements
if(document.selection){
document.selection.createRange().text=newText;
}
// Do mozilla compatible replacements
else{
el.value=el.value.substring(0,el.selectionStart)+newText+el.value.substring(el.selectionEnd,el.value .length);
}
}

/**
* Replace selected elments with the element wrapped in quotes
* This function is based on formatText()
*
* @return void
*/
function quoteText(el) {
var selectedText = document.selection?document.selection.createRange().text:el.value.substring(el.selectionStart,el.sel ectionEnd);

if (selectedText != '') {
var quote_begin = '<p class="quote">';
var quote_end = '</p>';

var newText=quote_begin+selectedText+quote_end;
// Do IE compatible replacements
if(document.selection){
document.selection.createRange().text=newText;
}
// Do mozilla compatible replacements
else{
el.value=el.value.substring(0,el.selectionStart)+newText+el.value.substring(el.selectionEnd,el.value .length);
}
}

:thumbsup:

SARIARAVIND
Jul 16th, 2009, 11:51 AM
Try this...it works.....code from dev shed forums........:-)

<script type="text/javascript">
<!--
function formatText (tag) {
var selectedText = document.selection.createRange().text;

if (selectedText != "") {
var newText = "<" + tag + ">" + selectedText + "</" + tag + ">";
document.selection.createRange().text = newText;
}
}
//-->
</script>


<form id="form1" runat="server" >
<div>
<asp:TextBox ID="TextBox1" runat="server" Height="224px" TextMode="MultiLine" Width="424px"></asp:TextBox><br />
<input type="button" value="bold" onclick="formatText ('b');" />
<input type="button" value="italic" onclick="formatText ('i');" />
<input type="button" value="underline" onclick="formatText ('u');" />&nbsp;<br />
Select Font<asp:Button ID="Button1" runat="server" Text="Button" />
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label></div>
</form>

Kor
Jul 16th, 2009, 01:05 PM
Try this...it works.....code from dev shed forums........:-)

<script type="text/javascript">
<!--
function formatText (tag) {
var selectedText = document.selection.createRange().text;

if (selectedText != "") {
var newText = "<" + tag + ">" + selectedText + "</" + tag + ">";
document.selection.createRange().text = newText;
}
}
//-->
</script>


<form id="form1" runat="server" >
<div>
<asp:TextBox ID="TextBox1" runat="server" Height="224px" TextMode="MultiLine" Width="424px"></asp:TextBox><br />
<input type="button" value="bold" onclick="formatText ('b');" />
<input type="button" value="italic" onclick="formatText ('i');" />
<input type="button" value="underline" onclick="formatText ('u');" />&nbsp;<br />
Select Font<asp:Button ID="Button1" runat="server" Text="Button" />
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label></div>
</form>

That is an incomplete solution.

phantom007
Jul 17th, 2009, 08:11 AM
Why dont you go for openwebware WYSIWYG editor?

http://www.openwebware.com/

sybil6
Nov 16th, 2009, 10:48 AM
how can i add to the function this:
for ex if you press the bold button, the text shows in bold and the tags are hidden ?

Kor
Nov 16th, 2009, 11:21 AM
You can't show a text as bold (nor italic, nor whichever) in a textarea or in an input.