manipulating text box with JavaScript

hi here's my problem :
i have a form with a text box. i need a way to make buttons and when they are clicked they insert html tags into the text box.
this is for someone who does not know html. eg. to make a new paragraph they click the 'paragraph' button and it inserts the<p>
tag...

1) is this possible with JavaScript

2) anyone know of any good JS tutorials that would explain this.

thanks

ill give you an explanation shortly afterwards

this right here is the function to enter the <p> tags. the first string, right here:

document.getElementById('Text').value=document.getElementById('Text').value+"<p>";

the parts before the equal sign say this is common language:
"..we first take the current value of the element with an ID of 'Text'.."

and the parts after:
"..we then change the value of 'Text' to itself plus the addition of the tag '<p>'.."

and so theres your basic setup for your tag insertions.
and for the next on, the same, except we just add different tags:

function sreturn()
{
document.getElementById('Text').value=document.getElementById('Text').value+"<br>";
}

were adding '<br>' tags here.

heres is the really tricky part that may confuse you...
here is the code part that contains the bold, italics, and underline tag insertions. this is hard because these tags require a starter tag(<b>,<i>,<u>) and an ending tag(</b>,</i>,</u>).
in order to explain this to you, ill give you a basic code structure example of setting this up:


since im assuming you prolly dont get it yet, ill break it down for you even further:

ok, first, we declare xx's value to be 0 even before we define the function. then, we give the function a name and create an if..else loop. the if statement is like this:
if(xx==0){}
and so, its saying if the arguements contained within the ()'s are true, then do the following procedures within the {}'s.
and so, since we first declared xx's value to be 0, it enters the loop since the arguements are returned as being true. so, the script navigates to the stuff within the {}'s and executes them one at a time. the first statement we put in there is this:
xx=1;
so, when it enters the if part of the loop, xx's value then becomes 1. and then, after its value is 1, the rest of the procedures are executed.

after the statements completion, it then returns to the beginning and runs through again when the function is called a 2nd time. this time, since xx's value is still 1, the if part returns false. with this, the script then skips down to the else{} area and executes those statements.
our first one resets xx's value to 0, and the rest is executed accordingly. we want to set xx's value back to 0 so the loop can execute again when the function is called a 3rd time.
and there you have it.

now, for working with the live example:

aa=0;

we declare aa's value to be 0.

function boldIt()
{

we define the functions name as boldIt.

if(aa==0)
{

we initialize our if statement and say:
"..if aa is equal to '0', then execute the following procedures.."

aa=1;
document.getElementById('Text').value=document.getElementById('Text').value+"<b>";
document.getElementById('Bold').value="End Bold Text";
}

we set our procedures as so(in plain english):
"..first off, aa should now become 1. then, take the current value of Text and add '<b>' to it. then, change the value of our button with an ID of Bold to 'End Bold Text'.."

else
{
aa=0;
document.getElementById('Text').value=document.getElementById('Text').value+"</b>";
document.getElementById('Bold').value="Start Bold Text";
}
}

after returning to the top upon the function being called a 2nd time, the function skips down to the else part since the if part evaluated to false.
and this is what it says in plain english:
"..first we reset aa's value back to 0 so we can recall the function a 3rd time. then, we take the current value of Text and add '</b>' to it. then, we reset the button Bold's value back to 'Start Bold Text'.."

and so, we have your function for adding paragraphs and carriage returns, and we also have our sophisticated bold, italic, and underline function. now we just have our reset function left.

this functions isnt even close to the others in difficulty. i believe even a newbie to js could easily pick up this function:

function resetIt()
{

we name our function resetIt

document.getElementById('Text').value="";
}

we say that when this function is called, we want the current value of Text to return back to nothing(aka " ").

i hope this helps you out. also, it helps alot to read the explanation while also viewing the actually page.


[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[ TeRmInAl ]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]

thanks a lot!!!

How would you do it if you got more than one text areas in the same page that need the formatting tools?

sorry for complicating it a bit more

no worries shockthealien. i got that covered here:






EDIT: AHHH shoot....youre not gonna like this, but what i just gave ya guys wont work too well for more than one textarea....blah, i used if's instead of ternaries....so, you can download it if ya want, but im gonna go ahead and change the functions. if ya know what youre doing though, by all means download it and manipulate the functions. sorry again

ok, this one works perfectly. tell me if ya find any bugs though so i can help to clear em up

yup, that works fantastic. Thanx a lot.

Would you hate me if i complicate it a bit more? would it be possible to insert the stuff where the cursor is instead of at the end? or around a selection of text?

If you like you can use this:
http://www.dmsproject.com/test/wysi...DmSWysiwyg.html
It's an early version that unfortunatley works only in IE, but you can preview the rendered HTML by clicking "GRANSKA".
In this you can highlight a written url click a button and it will create a link from it and so on.
Try it out, please use a link to http://www.dmsproject.com/ if you use it live though.
/Dan

hmm...i guess i could try.....might be abit hard....but im up to it

That would be fantstic if you could, cos at the minute is no good for editing text, only for input new text.

any progress so far?

hmmm....sorry, no luck yet......however im getting closer as i just examined a script that replaces spaces within a textarea with &nbsp; without replacing or adding it to the very end....so i should be getting closer

sounds promising

any luck?

sorry...ive come to believe that its impossible now....
i havent even found a server-side solution yet...
grr...thisll bug the cr@p outta me til i die

[[[terminal]]]