selections within textareas

benbacardi · #1 (**permalink**) Oct 15th, 2004, 18:27

i really didn't know where to put this!

its done on a lot of sites (including this one!), but how is it done? how can you detect what is highlighted in a textarea, and then add text around it? for example, they can highlight a word and click bold and it adds bold tags around it...?

how?!

thanks

bacardi

spinal007 · #2 (**permalink**) Oct 16th, 2004, 07:48

using the textRange object....
haven't done it in a while, lemme find it for you...

spinal007 · #3 (**permalink**) Oct 16th, 2004, 07:54

this should do:
http://msdn.microsoft.com/library/de.../textrange.asp

http://msdn.microsoft.com/library/de..._textrange.asp

benbacardi · #4 (**permalink**) Oct 16th, 2004, 19:26

ok thanks spinal but i never understand the msdn language - its too technical for me! Do you think you could explain it to me in more simple terms? much appreciated if you can...

Monie · #5 (**permalink**) Oct 17th, 2004, 12:22

This is my code to make the highlited text to be a url link..
Just put this on the <head> tag...
and call them using an gif or a text.

Code: Select all

function hiliteToExternLink(txtArea){
    txtAreaName   = txtArea.name;
    txtRange      = document.all[txtArea].createTextRange();
    txtContainer  = txtRange.parentElement().name;
    
    objRange      = document.selection.createRange();
    hiliteTxt     = objRange.text;

    toExternLink   = '' + hiliteTxt + '';
    
    if(hiliteTxt != ""){
        objRange.text = toExternLink;
    }
}

I dont have the full code now...
I'll post to you later, ok

benbacardi · #6 (**permalink**) Oct 17th, 2004, 13:55

thanks monie... it would be good if you could post the full code

spinal007 · #7 (**permalink**) Oct 17th, 2004, 15:08

I'm not good at these things but i'll explain monie's code...

THE IDEA:
the textRange object lets you rerieve and change text within an element.

USES:
"document.selection" points to the current selection on the document (duh!)

I made a small example so you can try it out yourself.
save this onto a htm file and run it:

Code: Select all

<SCRIPT>
function MakeBold(){
 // find selection
 r = document.selection.createRange();

 // exit function if no selection has been made
 if(r==null){ return; }

 // replace selection by itself, surrounded by the "[b]" tag
 r.pasteHTML("" +r.htmlText+ "");
}
</SCRIPT>
<INPUT TYPE=button value="Make Selection Bold" onMouseDown="MakeBold();">


text and more text and more text and more text and more text and more 
text and more text and more text and more text and more text and more 
text and more text and more text and more text and more text and more 
text and more text and more text and more text and more text and more 
text and more text and more text and more text and more text and more 
text and more text and more text and more text and more text and more 
</BODY>

1 . make a selection
2 . click the "Make Selection Bold" button
3 . that will trigger a function wi=hich will:
3 a) find the selection in the body of the document
3 b) retrieve the selected text
3 c) replace it by the same selected text sorrounded by the "[b]" tag

Monie · #8 (**permalink**) Oct 18th, 2004, 03:54

Code: Select all

<head>
<SCRIPT language=JavaScript1.2>

function hiliteToBold(txtArea){
	txtAreaName   = txtArea.name;
	txtRange      = document.all[txtArea].createTextRange();
	txtContainer  = txtRange.parentElement().name;

	objRange      = document.selection.createRange();
	hiliteTxt     = objRange.text;
	toBoldTxt     = "" + hiliteTxt + "";
	
	if(hiliteTxt != ""){
		objRange.text = toBoldTxt;
	}
}
</SCRIPT>
<head>

Code: Select all

<body>
<IMG: set your image button here..>


<TEXTAREA name=txtMainText rows=15 cols=30></TEXTAREA>

benbacardi · #9 (**permalink**) Oct 18th, 2004, 16:15

thanks guys i've worked it out and written one of my own...

... spinal, was it you who had that rich text editor that you made yourself? if so, how did you make one that updates it automatically like that... if you know what i mean

spinal007 · #10 (**permalink**) Oct 19th, 2004, 10:55

<blockquote id="quote" class="ffs">quote:<hr height="1" noshade="noshade" id="quote" />Originally posted by benbacardihow did you make one that updates it automatically like that<hr height="1" noshade="noshade" id="quote" /></blockquote id="quote">
what do you mean?

basics of editors: (as far as I know)
- manipulate the code
- show result so user "thinks" he's changing the text to bold while in fact he's placing "[b]"tags around it

simple implementation:
- use a textarea for the code
- create buttons that will insert whatever formatting to the code (just like the editor in this forum)
- use jscript to write the content of the textarea onto the document so you can see the HTML result. for this, use textRange.pasteHTML([textarea contents]);

benbacardi · #11 (**permalink**) Oct 19th, 2004, 19:00

i mean how do you make something like this http://www.dotmagic.co.uk/richeditor

Rob · #12 (**permalink**) Oct 20th, 2004, 09:11

Ben.... thats mine.. lol
That one sadly only works in internet explorer. If it were for an intra-net where all users had IE, then it would be perfect.

I wrote that one about a year ago and never used it.... it's still unfinished!

spinal007 · #13 (**permalink**) Oct 20th, 2004, 12:17

I would not advice you designing your own HTML editor for the following reasons:

1. there's free stuff out there. many very talented programmers (God bless the bastards) spend months or even years developing the most sweet pieces of coding you ever seen and let you use at at will. I gave up my own editor when I found htmlArea (http://www.interactivetools.com/products/htmlarea/)

2. having made the point above, you'll be wasiting your time trying to design something that will match the quality of the above, so unless you're simply trying to learn a few techniques, don't go all the way. by all means try and re-create the software in your own way, practice and learn from the code, but anyone is better off taking advantage of the free software available.

3. I forgot wat my third point was...

as posted here:
http://www.webforumz.com/topic.asp?TOPIC_ID=1946

Smokie · #14 (**permalink**) Jan 12th, 2005, 09:20

ive had problems with HTMLArea, the best ive found is: http://richtext.sourceforge.net/

#15 (**permalink**) Feb 15th, 2005, 17:13

What if you have 2 textareas, how can you determin in which of them the selection has been made?

Rob · #16 (**permalink**) Feb 16th, 2005, 08:53

I dont quite understand what you mean. Each textarea would have an ID. You just reference each textbox by it's id and see which has the selection.

#17 (**permalink**) Feb 16th, 2005, 13:59

and how do you do that?

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Navigation from 2 pulldown selections?	svoltmer	JavaScript Forum	2	Apr 28th, 2008 12:28
Highlighting text selections	mikemike2004	JavaScript Forum	6	Mar 15th, 2008 21:24
[SOLVED] color-box selections	pesho318i	JavaScript Forum	6	Dec 22nd, 2007 20:57
PHP and textareas	ktsirig	PHP Forum	3	Sep 25th, 2005 22:41

		Webforumz.com > Main Forums > Program Your Website > JavaScript Forum
selections within textareas