Eventhandler auf editierbare Iframe im “designmode” setzen

Monday, 26. May 2008

Da sich dies ungewöhnlich kompliziert zeigt und mancherorts sogar als unmöglich beschrieben wird möchte ich meine, letztlich doch recht schön gewordene, Lösung für dieses Problem öffentlich machen.

Die erste Funktion ermöglich das Anwählen einer Iframe IE und FF übergreifend.

function getIFrameDocument(aID){
if (document.getElementById(aID).contentDocument){
return document.getElementById(aID).contentDocument;
} else {
return document.frames[aID].document;
}
}

Die zweite Funktion setzt ebenfals Browserübergreifend die Eventlistener auf die “Designmodeaktivierte” Iframe

function setSourceEditEventhandlers() {
var srcedit = getIFrameDocument("xyzID");
if (srcedit.addEventListener) {
srcedit.addEventListener('keyup', sourceEvents, false);
srcedit.addEventListener('click', sourceEvents, false);
} else if (srcedit.attachEvent) {
srcedit.attachEvent('onkeyup', sourceEvents);
srcedit.attachEvent('click', sourceEvents);
}
}

Letztlich brauchen wir noch eine Funktion die dann auf Event ausgeführt wird.

function sourceEvents(evt) {
getFromSource();  //get body from sourceview
}

Zu guter Letzt benötigen wir noch die Funktion die den Designmode aktiviert und die Eventhandler setzt.. diese kann zb. man auf einen Button mit onclick=”” legen..

function activateLiveEdit()
{
getIFrameDocument("xyzID").designMode = "on";   //change sourceEditIframe to Designmode
setSourceEditEventhandlers()    //set all eventhandlers for sourceEdit
}