Turn highlighted text into hyperlink 1

[thessa]

We are creating an editor. One of the features allows the user to highlight text in a text area, click on a button and find a file to link to in a pop up window. No problem. After clicking on the file they choose, the pop up closes and the text that they highlighted in the text area should turn into a hyperlink to that file. The part that I am stuck on is *how* to make the text suddenly turn into a hyperlink. I know how to pass the html to the textarea, but not suddenly make their text a link.

If someone can point me in a direction I can do the research myself, I just don't know where to begin!
Thanks
Thessa X-)

 

[gana78]

Hi

If you actually mean text in the textarea
<textarea>
<a href=&quot;&quot;>your text is here</a>
</textarea>

i doubt if you can do this. As far as I know, whats in a text area is never parsed as html.

Note:
Since you are building an editor (im assuming its a web based html editor) putting in the <a href=&quot;&quot;>text</a> should be enough (unless ur requirements are different). Once the user is ready to say, view the page temporarily or something, u can put the text in the text area onto a new window where it will be parsed as html. Here it would appear as links.

 

[baad]

hi
must be smth like
str='myNewLink'
str.link(url)
but i cant get it to work right now - have no idea why...

regards

 

[jaredn]

Do you mean that it gets surrounded by 'A' tags in the text area, or in the sample page (as html)? jared@eae.net -

http://webfx.eae.net

 

[thessa]

Hey everyone, thanks for the responses. Yes, this is a web based html editor, and the requirements are that the user is not supposed to see the html, so I cannot put the href code in the editor box (which is really a big text area).

Jaredn, for example, if you highlight the words TO MYFILE then click on the link button a special popup comes up, one that lets the user browse to his/her file (unlike the built in CreateLink functionality unfortunately). Once they choose the file and close the popups, the words TO MYFILE suddenly become underlined and change to link color, although I just found out that it doesn't actually have to be a working link until the user publishes the document. But it has to look like a link. Which brings me to an idea, maybe I should just underline the text and change the text color of TO MYFILE? Then I could store the file path in a hidden input for example and worry about creating the link on the published page?
Arg, I'm wondering if javascript is even the way to go here...

 

[jaredn]

Just a quick little thing I whipped up for you. Only tested in IE5.5 and the coding is kinda dirty.

<script>

function makeLink()
{
var sel,to,rg;

sel = document.selection;

if(sel)
{
rg = sel.createRange();
to = window.prompt(&quot;Hyperlink:&quot;,&quot;&quot
if(to) rg.pasteHTML(&quot;<a href='&quot;+to+&quot;'>&quot;+rg.text+&quot;</a>&quot
else return false;
}
else
{
window.alert(&quot;You must select text to make a link.&quot
}
}

</script>

Hello, maybe I should make this a link!

<button onclick=&quot;makeLink()&quot; hidefocus style=&quot;cursor:hand&quot;>Make Link</button> jared@eae.net -

http://webfx.eae.net

 

[baad]

did it!
this syntax:

str='myNewLink'
var newlink=str.link(url)

well, it works, but is it what u've been lookin for?

regards, vic

 

[thessa]

:-0 Good grief you guys rock! I am about to head out the door (it's almost 6pm in italy!) but tomorrow I will jump on these first thing. I'm using IE 5.5 and I love dirty code! ha - I'm impressed thanks

 

[thessa]

alright, I have your code in jaredn, and it's working EXCEPT that rg.text is empty and when I replace it with 'HI' for testing it places the link in the body instead of the textarea (but it's a link!). My DHTML is nil, but I tried many things including replacing
sel = document.selection;
with
sel = document.forms[1].elements[3].selection;
which shows no value in an alert and replacing
(&quot;<a href='&quot;+to+&quot;'>&quot;+rg.text+&quot;</a>&quot
with
(&quot;<a href='&quot;+to+&quot;'>&quot;+rg.text[sel]+&quot;</a>&quot
Don't know where I got that hair brained idea (am I showing my lack of skills yet?!)
Any ideas?

Vic, I'm not really sure how to implement your suggestion into my code :-( , so I have focused on the other piece...

 

[jaredn]

You of course need to highlight a portion of text for this to work. The sample I gave you is functioning, maybe its hows you are placing it in your page or some other conflict.

Have a link to what you are doing? jared@eae.net -

http://webfx.eae.net

 

[baad]

hi jaredn,
i culdnt get ur function 2 work for textarea:
looks like u cant do smth like rg.pasteHTML(linky) for textarea ...

<html><head><title>makin links</title>
<script>
function makeLink(){
var sel,to,rg;
sel = document.selection;
if(sel) {
rg = sel.createRange();
to = window.prompt(&quot;Hyperlink:&quot;,&quot;&quot
if(to) linky=rg.text.link(to)
rg.pasteHTML(linky)//<--Unspecified error
}
else { window.alert(&quot;You must select text to make a link.&quot }
}
</script></head>
<body bgcolor=&quot;#FFFFFF&quot;>
<form name=ff1>
<textarea name=tt rows=5 cols=50 >
Hello, maybe I should make this a link!
yeah, gonna be cool!
</textarea>
<button onclick=&quot;makeLink()&quot; hidefocus style=&quot;cursor:hand&quot;>Make Link</button>
</form>
</body>
</html>


troubles....

 

[jaredn]

You cannot put rich html in a text area. You cannot make the text underlined or bold or anything like that... jared@eae.net -

http://webfx.eae.net

 

[thessa]

Alright, that's good to know and solves this problem. Now I will try some other avenue... Thanks for all your time both of you!