Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Client-side Scripting _ How to make a hyperlink navigable in an editable web page (i.e. when designMode = "On" or contentEditable = true)

Posted by: Casper Sep 5 2006, 03:03 AM

Hi all
I have created a WYSIWYG html editor with the help of an article at http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnmshtml/html/createwp.asp
Everything works fine. Now I just want to make navigable hyperlinks in this editor.

A user enters a hyperlink (Say www.msn.com) in the editor, editor detects the link, changes its color and underlines it but do not take user to the www.msn.com when he clicks the link.

Is it possible to make this link navigable right within the editor.
Thanks in anticipation
Nasir Iqbal

Posted by: Christian J Sep 5 2006, 04:08 AM

QUOTE(Casper @ Sep 5 2006, 10:03 AM)

Hi all
I have created a WYSIWYG html editor with the help of an article at http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnmshtml/html/createwp.asp
Everything works fine.

Note that the MSHTML engine is quite buggy,
~~e.g. pressing the Enter key inside a link may produce something like~~

CODE
<a href="">
<p>linktext</p>
</a>

EDIT: Now I can't reproduce the above, maybe I remembered wrong.

Opera and Mozilla/Firefox/Gecko make BR elements instead of P.

QUOTE

Is it possible to make this link navigable right within the editor.

Why not disable the editable mode before you want to use the link?

Otherwise, in IE it might be possible to use the onclick event on links while they are editable (and then make a javascript redirect from that), but I couldn't make this work properly.

Posted by: Casper Sep 5 2006, 05:19 AM

Thanks for quick response

QUOTE

Why not disable the editable mode before you want to use the link?

My html editor works like a TextArea where user can input notes to save them and can also view saved notes. But it is always in editable mode. I cant turn off editable mode.

As it detects hyperlinks as they are typed, I thought their might be some easier way to make these links navigable from within the editor just as when composing an email message in Yahoo mail.

QUOTE

Otherwise, in IE it might be possible to use the onclick event on links while they are editable (and then make a javascript redirect from that), but I couldn't make this work properly.

Can you please suggest some way of doing it? There may be multiple hyperlinks and I want to navigate user to a particular link when user clicks it.

Posted by: Christian J Sep 5 2006, 08:08 AM

QUOTE(Casper @ Sep 5 2006, 12:19 PM)

QUOTE

Why not disable the editable mode before you want to use the link?

My html editor works like a TextArea where user can input notes to save them and can also view saved notes.

Why use the contenteditable/designmode then? These are for WYSIWYG-style editing.

QUOTE

But it is always in editable mode. I cant turn off editable mode.

It's possible with java script:

CODE

if(document.body.contentEditable)
{
document.body.contentEditable=false; // use "true" to turn it on
}
else if(document.designMode)
{
document.designMode='off'; // use "on" to turn it on
}

You can also apply contentEditable to individual element (as opposed to the whole BODY), but I can't remember if designMode lets you do that.

QUOTE

As it detects hyperlinks as they are typed, I thought their might be some easier way to make these links navigable from within the editor just as when composing an email message in Yahoo mail.

I'm not familiar with Yahoo mail, but I don't think you should make links work as links when editing them WYSIWYG-style: the user must click an existing link in order to edit its link text, but as soon as the link is clicked the URL is changed.

QUOTE

Otherwise, in IE it might be possible to use the onclick event on links while they are editable (and then make a javascript redirect from that), but I couldn't make this work properly.

Can you please suggest some way of doing it? There may be multiple hyperlinks and I want to navigate user to a particular link when user clicks it.

I was thinking of something like

CODE

onclick="window.location.href=this.href"

in the link(s) with javascript. But again, this probably doesn't work.