Nikwrote:
Has anybody worked out how to get a pop up form to display for a link
when designMode is turned on ?
I'm trying to write a WYSIWYG HTML editor for OpenForum Wiki and want
a small helper form to be displayed when an editor clicks on an
existing link.
I don't know about IE, but Firefox has a lot of wonderful W3C DOM kit
that makes it quite simple. This basic example (no feature detection of
any sort) detects mouse clicks and keydowns. In the case of the former
it looks for an ancestor <a href="..."> element of the event target. In
the case of the latter (and pressing the enter key), a similar ancestor
of whatever node contains the start of the user selection. Finding
either, it displays an alert message where your 'helper form' would
normally go. This ensures the feature is both mouse and keyboard accessible.
For background see:
http://www.w3.org/TR/DOM-Level-2-Events
http://www.w3.org/TR/DOM-Level-2-Traversal-Range
http://www.w3.org/TR/DOM-Level-3-XPath
Tested in Firefox 2.0.0.13 and 3.0b4.
....................
function init() {
var d = document;
d.addEventListener("click", clicked, false);
d.addEventListener("keydown", keyed, false);
d.designMode = "on";
}
function clicked(e) {
var n = findAncestorLink(e.target);
if (n) {
e.stopPropagation();
popupWin();
}
}
function keyed(e) {
if (e.keyCode == 13) { // enter
var s = window.getSelection(), r;
if (s && s.rangeCount) {
r = s.getRangeAt(0);
}
var n = findAncestorLink(r.startContainer);
if (n) {
e.preventDefault();
popupWin();
}
}
}
function popupWin() {
window.alert("Your dialog here");
}
function findAncestorLink(n) {
var link =
document.evaluate("ancestor-or-self::a[@href]", n, null,
XPathResult.ANY_UNORDERED_NODE_TYPE, null);
return link.singleNodeValue;
}
...
<body onload="init()">...
