Axel Richter: IFrame eventhandler hinzufügen

Beitrag lesen

SELF-Forum

IFrame eventhandler hinzufügen

Axel Richter
– Informationen zu den Bewertungsregeln

Hallo,

Leider funktioniert das nicht so wie erhofft:

Was hast Du genau vor? Willst Du wirklich ein multifunktionales JavaScript-WYSIWYG-Editor-Control, welches auch noch in vielen Browsern läuft, selbst schreiben? Das halte ich für brotlose Kunst. Es gibt TinyMCE.

Wenn Du allerdings nur einige wenige Funktionen bereitstellen willst, kannst Du meinen Ansatz weiterverwenden:

  
<!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 aktuelle IE, FireFox und Opera</title>  
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">  
<script type="text/javascript">  
<!--  
[code lang=javascript]function watchFormats(editorDoc) {  
 //Diese Funktion kann als Voraussetztung für die Anzeige des aktuellen Formats der  
 //Markierung bzw. Textcursorposition genutzt werden.  
 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, editorWindow, editorDoc) {  
 if(!e && editorWindow.event) e = editorWindow.event;  
 if (e.which && e.altKey && e.ctrlKey) {  
     //Strg+Alt+B für FireFox  
  if (e.which==98) editorDoc.execCommand('bold', false, null);  
     //Strg+Alt+I für FireFox  
  if (e.which==105) editorDoc.execCommand('italic', false, null);  
     //Strg+Alt+U für FireFox  
  if (e.which==117) editorDoc.execCommand('underline', false, null);  
 } else if (e.keyCode) {  
  //IE nutzt die Shortcuts Strg+Shift+B, Strg+Shift+I, Strg+Shift+U von sich aus  
  //Opera nutzt die Shortcuts Strg+B, Strg+I, Strg+U von sich aus  
  window.status = "" + e.keyCode + e.ctrlKey + e.altLeft + e.altKey;  
 }  
}  
  
window.onload = function() {  
  //Initialisieren des IFrames  
  var editorWindow = document.getElementById('editor').contentWindow;  
  var editorDoc = editorWindow.document;  
  editorDoc.designMode="on";  
  
  //Initialisieren der Shortcuts  
  if(editorDoc.addEventListener) {  
    editorDoc.addEventListener('keypress', function(e) {shortCuts(e, editorWindow, editorDoc);}, true);  
  } else {  
    editorDoc.onkeypress = function(e) {shortCuts(e, editorWindow, editorDoc);};  
  }  
  
  //Initialisieren der Buttons  
  document.getElementById("fett").onclick = function() {  
   editorDoc.execCommand('bold', false, null);  
  };  
  document.getElementById("kursiv").onclick = function() {  
   editorDoc.execCommand('italic', false, null);  
  };  
  document.getElementById("unterstrichen").onclick = function() {  
   editorDoc.execCommand('underline', false, null);  
  };  
  
  //Initialisieren der Formatierungsüberwachung  
  window.setInterval(function() {watchFormats(editorDoc);}, 100);  
};
~~~//-->  
</script>  
</head>  
  
<body>  
  
<h1>Demonstration der Nutzung eines IFrames als Editor-Element</h1>  
  
<p><button id="fett">Fett</button>  
<button id="kursiv">Kursiv</button>  
<button id="unterstrichen">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>  
[/code]  
  
viele Grüße  
  
Axel
Beitrag melden
–
Informationen zu den Bewertungsregeln