The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> How to make a hyperlink navigable in an editable web page (i.e. when designMode = "On" or contentEditable = true)
Casper
post Sep 5 2006, 03:03 AM
Post #1





Group: Members
Posts: 2
Joined: 5-September 06
Member No.: 68



Hi all
I have created a WYSIWYG html editor with the help of an article at http://msdn.microsoft.com/library/default....ml/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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Sep 5 2006, 04:08 AM
Post #2


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



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....ml/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.

This post has been edited by Christian J: Sep 7 2006, 12:06 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Casper
post Sep 5 2006, 05:19 AM
Post #3





Group: Members
Posts: 2
Joined: 5-September 06
Member No.: 68



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.




User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Sep 5 2006, 08:08 AM
Post #4


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



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

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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 08:18 AM