Solved

Clickable Hyperlinks in Editable Iframe?

Posted on 2007-11-17
25
1,109 Views
Last Modified: 2013-11-19
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?
0
Comment
Question by:FrankTech
  • 11
  • 7
  • 7
25 Comments
 
LVL 63

Expert Comment

by:Zvonko
ID: 20306794
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
 

Author Comment

by:FrankTech
ID: 20306806
So there is absolutely no way to make a hyperlink clickable within an editable iframe, right?
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 20306832
It is wrong: write your own browser and define editable as you think that editable should behaviour.
0
 

Author Comment

by:FrankTech
ID: 20306850
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
 
LVL 63

Expert Comment

by:Zvonko
ID: 20307279
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
 

Author Comment

by:FrankTech
ID: 20307724
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
 
LVL 63

Expert Comment

by:Zvonko
ID: 20308826
:-)

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
 

Author Comment

by:FrankTech
ID: 20309581
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
 
LVL 29

Expert Comment

by:Badotz
ID: 20311570
FrankTech: Press the CTRL key and click the link.
0
 
LVL 29

Expert Comment

by:Badotz
ID: 20311574
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
 

Author Comment

by:FrankTech
ID: 20311617
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
 
LVL 29

Expert Comment

by:Badotz
ID: 20311642
Yep. IE6, WinXP Pro, fully patched.
0
Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

 

Author Comment

by:FrankTech
ID: 20311679
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
 
LVL 29

Expert Comment

by:Badotz
ID: 20311688
Ya know - I *am* using FF...sorry about that. Back in a flash...
0
 
LVL 29

Expert Comment

by:Badotz
ID: 20311702
Yep - IE does not rock :-(

It might be time to ask the Good Folks at wyzz about this, eh?
0
 

Author Comment

by:FrankTech
ID: 20311752
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
 
LVL 29

Expert Comment

by:Badotz
ID: 20311784
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
 

Author Comment

by:FrankTech
ID: 20311895
OK. I'll ask Wyzz. If they have a solution I'll post it here, too.
0
 
LVL 29

Expert Comment

by:Badotz
ID: 20311963
Sorry for the no joy. But any solution would be welcome. And, you can keep the points ;-)
0
 

Author Comment

by:FrankTech
ID: 20312041
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
 

Author Comment

by:FrankTech
ID: 20317688
   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
 
LVL 63

Accepted Solution

by:
Zvonko earned 500 total points
ID: 20318080
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
 
LVL 63

Expert Comment

by:Zvonko
ID: 20318084
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
 

Author Comment

by:FrankTech
ID: 20318553
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
 
LVL 63

Expert Comment

by:Zvonko
ID: 20323432
Make that loop as function and call the function after every switch.
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Suggested Solutions

Preface In the first article: A Better Website Login System (http://www.experts-exchange.com/A_2902.html) I introduced the EE Collaborative Login System and its intended purpose. In this article I will discuss some of the design consideratio…
Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
Viewers will learn about arithmetic and Boolean expressions in Java and the logical operators used to create Boolean expressions. We will cover the symbols used for arithmetic expressions and define each logical operator and how to use them in Boole…
Viewers will learn about basic arrays, how to declare them, and how to use them. Introduction and definition: Declare an array and cover the syntax of declaring them: Initialize every index in the created array: Example/Features of a basic arr…

759 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now