TextArea Editing

jsLove · Oct 4, 2001

I have no experience with cgi, tho i understand the basic concept.

I have an HTML form with a TextArea inwhich users insert text to be displayed on a web page.

I have been searching all over for a means to allow the user to bold any selection of text in this TextArea.

I have searched and found that with JavaScript the only way to do this is with a prompt box or to have buttons to append the beginning tag (<b>) or the end tag (</b>), but no way to take a Selected text and manipulate it in BOTH IE and NS.

...i dont know if this can even be done at all, but if there is a way or a resource to do it through cgi please let me know.

Thanks bunches,
~ jsLove

motte · Oct 4, 2001

jslove,

Not that I know of. Javascript or just typing in the <b></b> tags is all I've ever done.

This is something I've been working on:
if (stylecommand=="b&quot

{
var st=document.selection.createRange().text;
document.selection.createRange().text="<b>" + document.selection.createRange().text + "</b>";
}

If you hilite some text on a page, it is document.selection.createRange().text...

Then I just reset it, adding the bold tags. However, this does not work in Netscape (go figure!).

In the html, I have a bold button, so that when it is clicked, it calls a function and passes in a string that tells me what I'm doing. In this case, "b" is to bold it.

Does this help? I hope it can help solve some of your problems. You see, since this happens client-side, it is possible to do. Nothing has been submitted so the client-side js works.

Mike

jsLove · Oct 4, 2001

motte,

thx for the post, i have investigated the textRange() IE javascript function, and as you mentioned, it works great in IE ...not in Netscrape.

I didnt realize that this had to happen client-side...just about everything i do is javascript so it's not usually a concern.

I have heard that with NS and IE you can make a div layer and write your TextArea Contents as InnerHTML to it and then use the TextRange for IE and document.getSelection in NS, but that wont work for my purposes.

It's lookin like i will have to just make a button for Beginning Bold and another button for Ending Bold ....hate makin somethin like this for people who dont know html and just want to click.

Thank you for your help

~ jsLove

motte · Oct 4, 2001

jslove,

that version that you just mentioned, with the div/innerhtml way, sounds interesting. Do you have an example? Or how long do you think it would take for you to create one? I don't actually follow all that you mean, but a good example could benefit me. Would you mind creating one and sending me the code? Just let me know and I can get you my email address.

Mike

jsLove · Oct 4, 2001

motte,

I can prolly make ya one...wouldnt be till tomorrow or next day tho :/

i'm swamped with this html builder thingy...

..if you would like, gimme your email and i will send it to ya when i get it...who knows? i may get it workin well enough to use it... my issue with it is that im workin the form with tons of cold fusion...

...let me know if ya want it

~ jsLove

motte · Oct 4, 2001

jslove,

yeah send me the code if you get it. send to motte@fastweb.com. I am in no hurry to get it, but definitely interested in seeing how it is done. I'd appreciate it.

Thanks,

Mike

jsLove · Oct 4, 2001

motte,

k, got it.. will send when i have it

~ jsLove

PalOwl · Oct 30, 2001

You can do it in Netscape by using the document.getSelected() function call.
Here is an example of an HTML wysiwyg editor Im working on. It looks as though your doing a similar sort of thing.

<HTML>
<HEAD>
<TITLE>Capturing Key Presses</TITLE>

<style type="text/css">
#page { position: absolute; top: 80px; left: 16px; width: 484px; height: 316px; visibility: visible }
</style>

<script type="text/javascript" language="Javascript 1.2">
// Cross Browser WYSIWYG HTML editor using Javascript
// Author: Colin Bell
// Author email: colinb@gatewest.co.uk
// Date: 30th October 2001

// If you improve this script or add new features please send me a copy at colinb@gatewest.co.uk

// browser
var agt=navigator.userAgent.toLowerCase();
var is_major=parseInt(navigator.appVersion);
var is_minor=parseFloat(navigator.appVersion);
var is_nav =((agt.indexOf('mozilla')!=-1) && (agt.indexOf('spoofer')==-1) && (agt.indexOf('compatible') == -1) && (agt.indexOf('opera')==-1) && (agt.indexOf('webtv')==-1));
var is_nav2=(is_nav && (is_major == 2));
var is_nav3=(is_nav && (is_major == 3));
var is_nav4=(is_nav && (is_major == 4));
var is_nav5=(is_nav && (is_major == 5));
var is_nav5up=(is_nav && (is_major >= 5));
var is_nav4down=(is_nav && (!is_nav5up));
var is_ie =(agt.indexOf("msie&quot

!= -1);
var is_ie3 =(is_ie && (is_major < 4));
var is_ie4 =(is_ie && (is_major == 4) && (agt.indexOf("msie 5.0&quot

==-1) );
var is_ie4up =(is_ie && (is_major >= 4));
var is_ie4down =(is_ie && (is_major <= 4));
var is_ie5 =(is_ie && (is_major == 4) && (agt.indexOf("msie 5.0&quot

!=-1) );
var is_ie5up =(is_ie && !is_ie3 && !is_ie4);
var is_5up=(is_ie5up || is_nav5up);
var is_hotjava=(agt.indexOf("hotjava&quot

!=-1);
var is_opera=(agt.indexOf("opera&quot

!= -1);
var is_webtv=(agt.indexOf("webtv&quot

!= -1);
var is_win =( (agt.indexOf("win&quot

!=-1) || (agt.indexOf("16bit&quot

!=-1) );
var is_mac =(agt.indexOf("mac&quot

!=-1);
var vIE55Win=navigator.appVersion.toLowerCase().indexOf("msie 5.5&quot

!=-1 && is_win;
var vIE4Win=is_ie4 && is_win;
var vIE4Mac=is_ie4 && is_mac;

var normText = "";
var styledText = "";

//the string that is currently selected
var selectedStr = "";

var isBold = false;
var isItalic = false;

// switch bold on and off
function isBoldToggle() {

// if the user has something selected we bold that
if (selectedStr){modSelectedText("B&quot

;return;}

// otherwise we turn bold on
else if (isBold == false){isBold = true; alert("Bold On&quot

;}

else if (isBold == true){
isBold = false; alert("Bold Off&quot

;
normText = normText + "<B>" + styledText + "<\/B>";
styledText = "";
}

}

// switch italics on and off
function isItalicToggle() {
if (selectedStr){modSelectedText("I&quot

;return;}

// otherwise we turn italics on
else if (isItalic == false){isItalic = true; alert("isItalic On&quot

;}

else if (isItalic == true){
isItalic = false; alert("isItalic Off&quot

;
normText = normText + "<I>" + styledText + "<\/I>";
styledText = "";
}

}

//This will show you your selected text
function display() {
if (document.getSelection) selectedStr = document.getSelection();
else if (document.selection) selectedStr = document.selection.createRange().text;
selectedStr.replace(new RegExp('([\\f\\n\\r\\t\\v ])+', 'g')," &quot

;
document.myForm.myArea.value = selectedStr;

}

// this is the event that captures the selected text
if (window.Event)
document.captureEvents(Event.MOUSEUP);
document.onmouseup = display;

// this function will modify the selected text
function modSelectedText(myTag)
{
var myInfo = fgetDivText("page&quot

;

pattern = "/" + selectedStr +"/ig;";
pattern = eval(pattern);
myInfo = myInfo.replace(pattern,"<"+ myTag +">" + selectedStr +"<\/"+ myTag +">&quot

;

fWriteDiv("page",myInfo);
normText = myInfo;
document.GENERATE.typeHere.value = myInfo;

}

//this routine filters out mistakes and useless tags
function cleanUp(whatString)
{
var pattern = /<I><\/I>/ig;
var whatString = whatString.replace(pattern,"&quot

;

var pattern = /<B><\/B>/ig;
var whatString = whatString.replace(pattern,"&quot

;

var pattern = /<\/I><\/I>/ig;
var whatString = whatString.replace(pattern,"&quot

;

var pattern = /<\/B><\/B>/ig;
var whatString = whatString.replace(pattern,"&quot

;

var pattern = /<B<\/B>/ig;
var whatString = whatString.replace(pattern,"&quot

;

var pattern = /<B<B>/ig;
var whatString = whatString.replace(pattern,"&quot

;

var pattern = /<B><B>/ig;
var whatString = whatString.replace(pattern,"&quot

;

var pattern = /<I><I>/ig;
var whatString = whatString.replace(pattern,"&quot

;

var pattern = /<I<I>/ig;
var whatString = whatString.replace(pattern,"&quot

;

var pattern = /<I<\/I>/ig;
var whatString = whatString.replace(pattern,"&quot

;

return whatString;
}

// during the delete if we hit a tag, we have to find out what it is
// this will hunt through and returns the tag found
function deleteTag(whatString, endChar)
{
// duplicate the string for mods

for (i=0;i<whatString.length;i++){
//if we find the start tag we capture it
if (whatString.charAt(whatString.length - i) == "<&quot

{

// select the tag
mySubString = whatString.substring(whatString.length - i,endChar + 1)

// delete the tag
myInfo = whatString.substring(0,whatString.length - i)
// write back the string with the tag removed
fWriteDiv("page",myInfo)
document.GENERATE.typeHere.value = myInfo;

// if its not an end tag we delete again
return mySubString;
}

}
}

// if it was the backSpace we cancel the event or else it try to go back in history
// This routine handles going back (delete)
function checkBack(e){
var myInfo = fgetDivText("page&quot

;

if (is_nav4){keyPressed = String.fromCharCode(e.which); code = e.which;}
else if (is_ie4up){keyPressed = String.fromCharCode(window.event.keyCode);code = window.event.keyCode;}
// if it was the backSpace we cancel the event or else it will try to go back in history
if (window.event && window.event.keyCode == 8) { // try to cancel the backspace

//avoid a out of memory error by not going to far back
if (myInfo.length < 0){return;}

// Now to handle the tags
// if bold and italics are off
if ((isBold == false) && (isItalic== false)){
// check to see if we are on a tag (ie <\/b>)
if (myInfo.charAt(myInfo.length - 1) == ">&quot

{
myTag = deleteTag(myInfo, myInfo.length - 1);
myInfo = fgetDivText("page&quot

;
myInfo = myInfo.substring(0,myInfo.length - 1)

// add the tag back on
myInfo = myInfo + myTag
}

else {myInfo = normText.substring(0,normText.length - 1)}
normText = myInfo
}

// if bold is on and italics are off
else if ((isBold == true) && (isItalic == false)) {
styledText = styledText.substring(0,styledText.length - 1)
myInfo = normText + "<B>" + styledText + "<\/B>";
}

// if bold is on and italics are on
else if ((isBold == true) && (isItalic == true)) {
styledText = styledText.substring(0,styledText.length - 1)
myInfo = normText + "<B><I>" + styledText + "<\/I><\/B>";
}

// if bold is off and italics are on
else if ((isBold == false) && (isItalic == true)) {
styledText = styledText.substring(0,styledText.length - 1)
myInfo = normText + "<I>" + styledText + "<\/I>";
}

// cleanup the information
myInfo = cleanUp(myInfo);
normText = myInfo;

//write the final code
fWriteDiv("page",myInfo)
document.GENERATE.typeHere.value = myInfo;

window.event.cancelBubble = true;
window.event.returnValue = false;
return false;
}

}

//If keycode = 39 Then
//' right arrow key was pressed
//Picture1.Move Picture1.Left - 100
//End If

//If keycode = 37 Then
//' left arrow key was pressed
//Picture1.Move Picture1.Left + 100
//End If

//If keycode = 38 Then
//' up arrow key was pressed
//Picture1.Move Picture1.Top + 100
//End If

//If keycode = 40 Then
//' down arrow key was pressed
//Picture1.Move Picture1.Top - 100

function updateMe(e)
{

var myInfo = fgetDivText("page&quot

;

//empty out the selection
//selectedStr ="";
if (is_nav4){keyPressed = String.fromCharCode(e.which); code = e.which;}
else if (is_ie4up){keyPressed = String.fromCharCode(window.event.keyCode);code = window.event.keyCode;}

// if was an enter we make it a <br>
if (code==13){keyPressed = "<BR>";}

// if it was the backSpace we cancel the event or else it will try to go back in history
if (window.event && window.event.keyCode == 8) { // try to cancel the backspace
window.event.cancelBubble = true;
window.event.returnValue = false;
return false;

}

// convert to HTML
if (keyPressed == "<&quot

{ keyPressed = "<"};
if (keyPressed == ">&quot

{ keyPressed = ">"};
if (keyPressed == "&&quot

{ keyPressed = "&"};

// if bold and italics are off
if ((isBold == false) && (isItalic== false)){ normText += keyPressed;myInfo = normText;}

// if bold is on and italics are off
else if ((isBold == true) && (isItalic == false)) { styledText += keyPressed;myInfo = normText + "<B>" + styledText + "<\/B>";}

// if bold is on and italics are on
else if ((isBold == true) && (isItalic == true)) {styledText += keyPressed;myInfo = normText + "<B><I>" + styledText + "<\/I><\/B>";}

// if bold is off and italics are on
else if ((isBold == false) && (isItalic == true)) { styledText += keyPressed;myInfo = normText + "<I>" + styledText + "<\/I>";}

fWriteDiv("page",myInfo)
document.GENERATE.typeHere.value = myInfo;

}

function fWriteDiv(inName,inText){
var tDoc;
if(is_nav4){
eval("tDoc=document." + inName + ".document&quot

;
tDoc.open();
tDoc.write(inText);
tDoc.close();
}
if (is_ie4){document.all[inName].innerHTML=inText; }
if (is_5up){document.getElementById(inName).innerHTML=inText; }
}

function fgetDivText(inName){
var tDoc;
if(is_nav4){
eval("tDoc=document." + inName + ".document&quot

;
tDoc.open();
inText = tDoc.HTML;
tDoc.close();
}
if (is_ie4){inText = document.all[inName].innerHTML; }
if (is_5up){inText = document.getElementById(inName).innerHTML; }

return inText
}

</script>

</HEAD>

<body onkeypress ="updateMe();" onkeyDown ="checkBack();">

<a href="#" onMouseUp="javascript:isBoldToggle()">Bold</A> <a href="#" onMouseUp="javascript:isItalicToggle()">Italic</A>

<DIV class="testarea" id="page"></DIV>

<form name="GENERATE">
<BR><BR><BR><BR><BR><BR><textarea style="displays" rows=10 cols=50 name="typeHere" WRAP="Yes"></textarea>
</form>

<P><FORM NAME="myForm">
<TEXTAREA NAME="myArea" COLS="40" ROWS="4"></TEXTAREA>
</FORM></P>

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

TextArea Editing

jsLove

Programmer

motte

Programmer

jsLove

Programmer

motte

Programmer

jsLove

Programmer

motte

Programmer

jsLove

Programmer

PalOwl

Programmer

Similar threads

Part and Inventory Search

Sponsor