YannLeretaille: contenteditable, Keyhandler und iframe

SELF-Forum

contenteditable, Keyhandler und iframe

YannLeretaille
– Informationen zu den Bewertungsregeln

Hallo,

Ich programmiere mir gerade aus Jux einen kleinen WYSIWYG Editor.
Hierzu verwende ich ein iframe mit folgendem Inhalt
  <body contenteditable />
, das ich dann mit ein paar Buttons manipulieren kann.
Also wirklich nichts schwieriges.
Nun möchte ich, dass beim drücken verschiedener Tastenkombinationen der Text im iframe formatiert wird. Das habe ich zunächst nur auf das Dokument außerhalb des iframes angewendet und es funktioniert auch sehr gut (ALT+I,ALT+U). Allerdings ist es unsinnig, wenn der User jedesmal irgendwo im Dokument klicken muss, um das iframe zu verlassen und dann erst die Kombination verwenden zu können.
Daher habe ich versucht, ein ähnliches Event auf das iframe anzuwenden, allerdings (leider) ohne Erfolg. Dies scheint irgendwie etwas komplizierter zu sein, da bei aktivierten contenteditable normal keine js ausführbar zu sein scheint.

Es gab schon einmal einen ähnlichen Post, aber daraus werde ich nicht klug. Die Websuche hat ergeben, dass ich nicht der einzige bin, der dieses Problem hat, allerdings bin ich nicht auf die Lösung gestoßen.
Vielleicht weiß ja hier jemand, was man machen muss.

MfG,
Yann

PS.:
Wenn ich gerade online bin, kann der jetzige Stand hier abgerufen werden (Könnte etwas langsamer sein da ich nur DSL 6000 habe, also 60-70KB/s Upload):
http://yannleretaille.dyndns.org/index.php?id=WYSIWYG Editor

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. contenteditable, Keyhandler und iframe

    Axel Richter
    – Informationen zu den Bewertungsregeln

    Hallo,

    die Methode contenteditable ist subobtimal, weil sie nur vom IE unterstützt wird. Im Gegensatz dazu kann document.designMode auch Mozilla. Siehe http://www.mozilla.org/editor/ie2midas.html und für Microsoft http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/designmode.asp. Für Dein Problem ist das aber nicht direkt relevant. Der IE hat in editable documents automatisch die shortcuts [Strg]+b, [Strg]+i, [Strg]+u aktiviert. Ein Eventhandler für onkeypress ist zwar implementierbar. Die Steuertastencodes e.ctrlKey, e.altLeft, e.altKey werden aber nur aktiv, wenn auch ein Zeichen erzeugt wird, z.B. bei ²³@€. Sie sind also nicht für zusätzliche shortcuts nutzbar. Im folgenden Beispiel ist das in window.status zu sehen. Für Mozilla sind die shortcuts [Strg]+[Alt]+b, [Strg]+[Alt]+i, [Strg]+[Alt]+u implementiert.

      
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
        "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<title>IFrame im Designmode f&uuml;r IE und Mozilla</title>  
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">  
<script type="text/javascript">  
<!--  
function watchFormats() {  
 var editorDoc = document.getElementById('editor').contentWindow.document;  
 var format = "";  
 format += editorDoc.queryCommandValue('fontname') + " ";  
 format += editorDoc.queryCommandValue('fontsize') + " ";  
 if (editorDoc.queryCommandState('bold')) format += "bold ";  
 if (editorDoc.queryCommandState('italic')) format += "italic ";  
 if (editorDoc.queryCommandState('underline')) format += "underline ";  
 document.getElementById('tf').value = format;  
}  
  
function shortCuts(e) {  
 if(!e && document.getElementById('editor').contentWindow.event) e = document.getElementById('editor').contentWindow.event;  
 if (e.which && e.altKey && e.ctrlKey) {  
  if (e.which==98) document.getElementById('editor').contentWindow.document.execCommand('bold', false, null);  
  if (e.which==105) document.getElementById('editor').contentWindow.document.execCommand('italic', false, null);  
  if (e.which==117) document.getElementById('editor').contentWindow.document.execCommand('underline', false, null);  
 } else if (e.keyCode) {  
  window.status = "" + e.keyCode + e.ctrlKey + e.altLeft + e.altKey;  
 }  
}  
  
window.onload = function() {  
  var editorDoc = document.getElementById('editor').contentWindow.document;  
  editorDoc.designMode="on";  
  
  if(editorDoc.addEventListener) {  
    editorDoc.addEventListener('keypress', shortCuts, true);  
  } else {  
    editorDoc.onkeypress = shortCuts;  
  }  
  
  window.setInterval("watchFormats()", 100);  
};  
//-->  
</script>  
</head>  
  
<body>  
  
<h1>Demonstration der Nutzung eines IFrames als Editor-Element</h1>  
  
<p><button onclick="document.getElementById('editor').contentWindow.document.execCommand('bold', false, null)">Fett</button>  
<button onclick="document.getElementById('editor').contentWindow.document.execCommand('italic', false, null)">Kursiv</button>  
<button onclick="document.getElementById('editor').contentWindow.document.execCommand('underline', false, null)">Unterstrichen</button></p>  
  
<p><label>aktuelles Format </label><input type="text" id="tf" value="" size="50" maxlength="50"></p>  
  
<p>Hier Text eingeben:</p>  
  
<iframe id="editor" width="400" height="100"></iframe>  
  
<p><textarea rows="5" cols="50" id="ta"></textarea></p>  
  
<button onclick="document.getElementById('ta').value=document.getElementById('editor').contentWindow.document.getElementsByTagName('html')[0].innerHTML;">Zeige Quelltext</button>  
</body>  
</html>

    viele Grüße

    Axel

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln