...
PDA

putting tags around selected text in textarea

chump2877
07-06-2006, 03:30 PM
I've been playing around with this code for a while now, and I just can;t seem to figure out a way to get this code to work in Mozilla/Firefox....

It seems that Mozilla's getSelection() method can only return a variable string value, and can;t actually attach a value to the current form object like IE's document.selection.createRange() can....

Anyway, it's giving me aheadache, and I can;t find any useful resources on the web to help me...If anyone can give me some tips or direct me towards an online tutorial for this, I would be immensely in your debt!

Here's my code so far (it only works in IE at the moment):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html lang=en>

<head>

<title>Add System</title>

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">

<script type="text/javascript">
<!--

var isSelected = false;
var text;

function copySelection(workArea)
{
if (document.selection && document.selection.createRange)
{
workArea.workText = document.selection.createRange();
}
else if (document.getSelection)
{
text = document.getSelection();
}

isSelected = true;
}

function wrapInTags(workArea,isTag)
{
if (isSelected)
{
if (document.selection && document.selection.createRange)
{
workArea.workText.text = "["+isTag+"]"+workArea.workText.text+"[/"+isTag+"]";
if (workArea.workText.text==''){isSelected=false;workArea.focus()}
}
else if (document.getSelection)
{
workArea.value = "["+isTag+"]"+text+"[/"+isTag+"]";
}
}
}

-->
</script>

</head>


<body>

<form name="main">

<input name="bold" type="button" value="Bold" onclick="wrapInTags(window.document.main.area1,'b'); return false;">

<input name="italic" type="button" value="Italic" onclick="wrapInTags(window.document.main.area1,'i'); return false;">

<input name="underline" type="button" value="Underline" onclick="wrapInTags(window.document.main.area1,'u'); return false;">

<p><textarea name="area1" cols="53" rows="6" onselect="copySelection(window.document.main.area1)"></textarea></p>

</form>

</body>

</html>
Kravvitz
07-07-2006, 01:24 AM
What you need is a textarea replacement script.

http://openwebware.com/products/openwysiwyg/
http://www.fckeditor.net/
http://www.google.com/search?q=textarea+WYSIWYG+Firefox+IE+Opera+%7Etutorial
chump2877
07-07-2006, 04:08 AM
What you need is a textarea replacement script.

http://openwebware.com/products/openwysiwyg/
http://www.fckeditor.net/
http://www.google.com/search?q=texta...ra+%7Etutorial

These are good links, and I can certainly sift through the source code of these projects to try to emulate the techniques in my own code....

But, I was looking for a more comprehensive explanation of how to actually code something like this....A tutorial that explains what the javascript is doing and why it works....

The point is that I would like to try to write my own textarea editor, and not rely on a pre-packaged solution....I learn more that way :)

Plus I really only need some basic functions for my editable text area...nothing fancy, just basic fiunctionality (i.e., the ability to add BB style tags -- Bold, Italic, Underline, URLs, and List tags)...

Thanks for your response though...I still plan to look through the code of those existing WYSIWYG editors ;)
Kravvitz
07-07-2006, 05:10 AM
Oh. You didn't mention bbcode and I didn't scroll down to see that's what you're trying to do.

Check out these:
http://www.sitepoint.com/forums/showthread.php?t=296023
How can I manipulate the selection and the caret in an input type="text" element in Mozilla browsers and IE/Win? (http://www.faqts.com/knowledge_base/view.phtml/aid/13562)
http://www.alexking.org/blog/2003/06/02/inserting-at-the-cursor-using-javascript/
http://www.massless.org/mozedit/
http://parentnode.org/javascript/working-with-the-cursor-position/
chump2877
07-07-2006, 07:37 AM
Thanks!

I used code from here: http://www.sitepoint.com/forums/showthread.php?t=296023

BTW, it turns out I needed regular html tags instead of BB tags...

Anyway, I added some of my own code to get the following, which seems to work for me:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html lang=en>

<head>

<title>Add System</title>

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">

<script type='text/javascript'>
<!--

function ubbc(open, end)
{
if (open == "")
{
var txt = prompt("Enter URL for the link.","http://");

if (txt)
{
open = '<a href="'+txt+'">';
}
else
{
return false;
}
}

if (open == "<ul>")
{
var list_item = prompt("Enter a list item. Press \"Cancel\" when you are done.","");

if (list_item)
{
while (list_item)
{
open = open+"\n<li>"+list_item+"</li>";
list_item = prompt("Enter a list item. Press \"Cancel\" when you are done.","");
}

open = open+"\n";
}
else
{
return false;
}
}

var tArea = document.main.area1;
var isIE = (document.all)? true : false;
var open = (open)? open : "";
var end = (end)? end : "";

if (isIE)
{
tArea.focus();
var curSelect = document.selection.createRange();
if (arguments[2])
{
curSelect.text = open + arguments[2] + ">" + curSelect.text + end;
}
else
{
curSelect.text = open + curSelect.text + end;
}
}
else if (!isIE && typeof tArea.selectionStart != "undefined")
{
var selStart = tArea.value.substr(0, tArea.selectionStart);
var selEnd = tArea.value.substr(tArea.selectionEnd, tArea.value.length);
var curSelection = tArea.value.replace(selStart, '').replace(selEnd, '');
if (arguments[2])
{
tArea.value = selStart + open + arguments[2] + ">" + curSelection + end + selEnd;
}
else
{
tArea.value = selStart + open + curSelection + end + selEnd;
}
}
else
{
tArea.value += (arguments[2])? open + arguments[2] + ">" + end : open + end;
}
}

//-->
</script>

</head>


<body>

<form name="main">
<input type='button' value='Bold' onclick="ubbc('<b>','</b>')" />
<input type='button' value='Italic' onclick="ubbc('<i>','</i>')" />
<input type='button' value='Make List' onclick="ubbc('<ul>', '</ul>')" />
<input type='button' value='Add Link' onclick="ubbc('','</a>')" />
<input type='button' value='HR' onclick="ubbc('<hr>')" />
<input type='button' value='Wink' onclick="ubbc(';)')" />
<p><textarea name='area1' cols='88' rows='6'></textarea></p>
</form>

</body>

</html>
_Aerospace_Eng_
07-07-2006, 08:37 AM
Hmm this could get dangerous. Where will this html be stored. There is a reason why the forum only allows bbcode. Its for security reasons.
chump2877
07-07-2006, 10:13 AM
that's true, I didn;t think of that....

But, this is going to be used in the backend of someone's website, which is already password protected...so I should probably be OK here...

Plus I suppose I could just add PHP's htmlentities() (http://us2.php.net/manual/en/function.htmlentities.php) into the mix to protect me from malicious client side code...

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum