Clickable Hyperlinks in Editable Iframe?

I'm using a free, light-weight rich-text area (http://www.wyzz.info/demo.php). that replaces standard html textareas with javascript-controlled iFrames.
    It's probably just something about the way editable iframes work, but I notice that hyperlinks in the editable rich-text areas are not "live" hyperlinks. Clicking on them does nothing.  
    I realize that's intentional, so users can edit the hyperlinks without accidentally losing the form by opening the hyperlinked web page.
    But I have a project where I need for users to be able to click the links in the edited text, in order to look up information from those linked pages, while editing the text in the rich-textarea. (I would use target="_blank" so the link opens in a new window without disturbing the editing form.)
    Question: can the Experts please take a look at the javascript code for the Wyzz editor ( http://216.92.58.65/wyzz.htm ) and the demo linked above, and tell me if there is any way to make hyperlinks in an editable rich-textarea "live" so they can be clicked and open a new window?
FrankTechAsked:
Who is Participating?
 
ZvonkoConnect With a Mentor Systems architectCommented:
That onClick addition can be done by JavaScript.
Like this:

<textarea name='test' id='tx1' cols='50' rows='32'><p>When you're experimenting with WYSIWYG editor applications, it's important to check that your programs work in all of the commonly-used browsers.</p><p>It always surprises me that so many Windows users don't install other browsers - at the very least, Firefox - to try in addition to Internet explorer. It's free, has pop-up blocking, tabbed browsing, as well as privacy and security features, and a rapidly-expanding user base.</p><p> If you run Windows, you can install Firefox alongside IE and compare the results in both. The next screen has a download link where you can get Firefox.</p>
<a href="http://www.experts-exchange.com/Q_22968183.html">EE</a></textarea><br />
<script language="JavaScript">
make_wyzz('tx1');
var lnk = document.getElementById('wysiwyg'+'tx1').contentWindow.document.links;
for(var i=0;i<lnk.length;i++){
  lnk[i].onclick=function(){window.open(this.href);return false}
}
</script>

Open in new window

0
 
ZvonkoSystems architectCommented:
My idea would be to add a "follow" button in the toolbar and let the button examine the <a> tag at cursor position to follow the href link.

An example how to code that is much too much work for free ;-)
0
 
FrankTechAuthor Commented:
So there is absolutely no way to make a hyperlink clickable within an editable iframe, right?
0
Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
ZvonkoSystems architectCommented:
It is wrong: write your own browser and define editable as you think that editable should behaviour.
0
 
FrankTechAuthor Commented:
OK. I understand why browsers did not define editable to include clickable hyperlinks. There are good reasons for the current browser design. I was just hoping there might be some kind of javascript trick to work around it in special circumstances.  
     Since there is not, could you give me at least a little bit of guidance on programming a toolbar button to follow the link at cursor position?  I'm not asking you to write the code; but I would appreciate more of a hint on how it could be done.
0
 
ZvonkoSystems architectCommented:
Start looking how other buttons work. Take one button that works on words, for example superscript button. The button calls the function onclick="formatText(this.id,'tx1');" so your button needs an ID that is identifying the new functionality, let say "follow".
Now you need that "follow" entry in formatText() function. Add it to the end of the chain of else-if cascades.
Like this:


      else if(id=="insertimage") {
        // var browserName = navigator.appName;	 	 
        if (browserName == "Microsoft Internet Explorer") {       
          document.getElementById("wysiwyg" + n).contentWindow.document.execCommand(id, true, null);
        } else {
          insertImage(n);
        }
      }
      else if(id=="follow") {
         // here your new script
      }
      else {
        document.getElementById("wysiwyg" + n).contentWindow.document.execCommand(id, false, null);
    }

Open in new window

0
 
FrankTechAuthor Commented:
OK. That's helpful. Could you also give a hint of how javascript can read and follow a link?
     Especially when the link code itself is not visible to the user (only the lable between <a href . . >label</a>  is visible).  
    The links are like <a href="www.example.com" target="_blank">a link</a> .

       The only thing I could find on this site was this example, but it doesn't look like it actually reads a hyperlink, and definitely not    .net   or   .org .

       <A href="#" onclick="return navigate('example')">example</A>
     function navigate(str1) {
      window.open ('http://'+ str1 + '.com');
     return false;
    }

By the way, I have raised the points to 500 since this is more complicated than I first thought.
0
 
ZvonkoSystems architectCommented:
:-)

I am not sure how it can be done before I would have tested what objects I do get from the selection finding routines already built in that scripts.
But my hope is that you get by any means also a DOM object to the link. If you get that DOM representation of a link then you have won! The link has a .href property and you can use it in your script to open a new window with the window.open(theLink.href) method.

0
 
FrankTechAuthor Commented:
Zvonko,
    I've looked at the javascript a lot and cannot figure out what to do.  I also googled to see what I could find, and can't find anything relevant.
    I hope you're willing to help to figure it out.  Maybe I'll open a pointer question to see if anyone has done this before, and they might want to comment here. Thanks.
0
 
BadotzCommented:
FrankTech: Press the CTRL key and click the link.
0
 
BadotzCommented:
I did this on the Wyzz homepage
<p>When you're experimenting with WYSIWYG editor applications, it's important to check that your programs work in all of the commonly-used browsers.</p><p>It always surprises me that so many Windows users don't install other browsers - at the very least, Firefox - to try in addition to Internet explorer. It's free, has pop-up blocking, tabbed browsing, as well as privacy and security features, and a rapidly-expanding user base.</p><p> If you run Windows, you can install Firefox alongside IE and compare the results in both. The next screen has a download link where you can get Firefox.</p><br>
<a href="http://www.google.com">Google!</a>

Open in new window

0
 
FrankTechAuthor Commented:
Badotz,
   Thanks, but it's not doing anything in IE6 when I try pressing the CTRL key and then clicking the link. The paragraph gets highlighted when I do that, but the link remains "dead."  Did a new window open to the link when you tried it?
0
 
BadotzCommented:
Yep. IE6, WinXP Pro, fully patched.
0
 
FrankTechAuthor Commented:
Badotz
I just tried it in FireFox, and I found it does this:
    CTRL + click link = open new tab
    SHIFT + click link = open new window
    ALT + click link = download link

However, nothing happens at all in IE6 on XP Home.
    I believe most of my users will have the IE6 / XP Home configuration, so I hope there is some workaround to make it work.
0
 
BadotzCommented:
Ya know - I *am* using FF...sorry about that. Back in a flash...
0
 
BadotzCommented:
Yep - IE does not rock :-(

It might be time to ask the Good Folks at wyzz about this, eh?
0
 
FrankTechAuthor Commented:
I will consider posting a question on their forum, but it appears to be mainly other users who respond--not the developer. I have a feeling there is a lot more expertise on this board than on theirs.
    Do you have an suggestions on how to accomplish Zvonko's original suggestion: to make a button for the editor's toolbar, which would detect the hyperlink under the cursor and follow it in a new window?
0
 
BadotzCommented:
Sorry, no. wyzz is your best bet. And just because the forum is inhabited by users doesn't mean that someone hasn't had the same problem and found a fix, eh?
0
 
FrankTechAuthor Commented:
OK. I'll ask Wyzz. If they have a solution I'll post it here, too.
0
 
BadotzCommented:
Sorry for the no joy. But any solution would be welcome. And, you can keep the points ;-)
0
 
FrankTechAuthor Commented:
By the way, it's not just a Wyzz issue. I have found the same problem in IE6 with the famous old HTMLArea, and also many other rich-text editors that have online demos. Seems to be an IE problem.
0
 
FrankTechAuthor Commented:
   I discovered hyperlinks become clickable in the editor if they are made of Javascript, like this:

<a href="#" onClick="javascript:window.open('http://www.example.com','mywindow');">Click here</A>

That won't work unless the developer's application will allow re-doing hyperlinks as javascript links. In my case, I can control the format of hyperlinks programmatically; so I'll probably use PHP to make them all javascript links.
0
 
ZvonkoSystems architectCommented:
When you want to have that onClick applied also for new created links then put that loop into a function and call the function on every link creation.

0
 
FrankTechAuthor Commented:
Thanks Zvonko. That solution (ID 20318080) works great!  But if the user clicks the <> button to view the html, and then clicks the <> button again to go back to rich-text view, the links don't work anymore.
   As far as I can tell, the user has not changed the html by only viewing it.  But the hyperlinks won't work after viewing it.  How can your solution work around that?
0
 
ZvonkoSystems architectCommented:
Make that loop as function and call the function after every switch.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.