Eventhandler für das Bearbeiten eines Iframes

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Eventhandler für das Bearbeiten eines Iframes

    Hallo Profis,

    ich stehe mal wieder vor einem Problem. Ich habe einen kleinen WYSIWYG Editor programmiert. Dazu nutze ich einen Iframe mit designmode=On. Soweit kein Problem! Nun möchte ich, bei Änderung des Dokuments, mit "queryCommandValue" die aktuelle Formatierung auslesen um sie im entsprechenden Dropdown-Menü (z.B. fontsize, fontname) anzuzeigen. Da man auf einen Iframe kein Eventhandler anwenden kann, weis ich nicht wie ich die Function updateToolbar() aufrufen kann in welchem die "queryCommandValue"s stehen. Hat eventuell jemand von euch Erfahrung damit?

    Ich weiss ...
    Es gibt schon Tauesende Editoren, aber ich möchte ja auch dazu lernen.
    Ich habe mir auch bereits schon einige angeschaut. Aber die Codes bringen mich einfach nicht weiter.

    Die einzige Lösung die ich bisher habe ist

    Quellcode

    1. window.onload = function() {
    2. window.setInterval("updateToolbar()", 100);
    3. }


    Allerding sehe ich das nicht als Lösung da die Function updateToolbar() permanent aufgerufen wird.
    Ich hoffe es kann mir jemand helfen.

    Grüße KMD

  • Späte Antwort.. aber ich habe mich erst jetzt ein bisschen über WYSIWYG Editoren informiert.
    http://www.easy-coding.de/textarea-live-auswerten-js-t3767.html

    Wie weit bist du inzwischen? Ich denke das Überwachen mit der Timer Funktion ist ganz praktikabel

    http://forum.de.selfhtml.org/archiv/2007/2/t146099/

    Quellcode

    1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    2. "http://www.w3.org/TR/html4/loose.dtd">
    3. <html>
    4. <head>
    5. <title>IFrame im Designmode f&uuml;r IE und Mozilla</title>
    6. <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    7. <script type="text/javascript">
    8. <!--
    9. function watchFormats() {
    10. var editorDoc = document.getElementById('editor').contentWindow.document;
    11. var format = "";
    12. format += editorDoc.queryCommandValue('fontname') + " ";
    13. format += editorDoc.queryCommandValue('fontsize') + " ";
    14. if (editorDoc.queryCommandState('bold')) format += "bold ";
    15. if (editorDoc.queryCommandState('italic')) format += "italic ";
    16. if (editorDoc.queryCommandState('underline')) format += "underline ";
    17. document.getElementById('tf').value = format;
    18. }
    20. window.onload = function() {
    21. var editorDoc = document.getElementById('editor').contentWindow.document;
    22. editorDoc.designMode="on";
    24. editorDoc.execCommand('fontname', false, 'Times New Roman');
    25. editorDoc.execCommand('fontsize', false, '12');
    26. window.setInterval("watchFormats()", 100);
    27. };
    28. //-->
    29. </script>
    30. </head>
    32. <body>
    34. <h1>Demonstration der Nutzung eines IFrames als Editor-Element</h1>
    36. <p><button onclick="document.getElementById('editor').contentWindow.document.execCommand('bold', false, null)">Fett</button>
    37. <button onclick="document.getElementById('editor').contentWindow.document.execCommand('italic', false, null)">Kursiv</button>
    38. <button onclick="document.getElementById('editor').contentWindow.document.execCommand('underline', false, null)">Unterstrichen</button></p>
    40. <p><label>aktuelles Format </label><input type="text" id="tf" value="" size="50" maxlength="50"></p>
    42. <p>Hier Text eingeben:</p>
    44. <iframe id="editor" width="400" height="100"></iframe>
    46. <p><textarea rows="5" cols="50" id="ta"></textarea></p>
    48. <button onclick="document.getElementById('ta').value=document.getElementById('editor').contentWindow.document.getElementsByTagName('html')[0].innerHTML;">Zeige Quelltext</button>
    49. </body>
    50. </html>
    Alles anzeigen

  • Hallo dOnUt,

    ich hatte schon garnicht mehr mit einer Antwort gerechnet.
    Das Überwachen mit der Timer-Funktion ist prinzipiell nicht schlecht. Das Problem war allerdings, dass im Firefox beim Öffnen von Drop-Down-Menüs, diese angefangen haben zu flackern. Ich habe es jetzt mit EventHandlern gelöst.

    Quellcode

    1. if (is_ie4up)
    2. {
    3. // document.getElementById('iframeId').contentWindow.document.onclick = new Function("updateToolbar()");
    4. document.getElementById('iframeId').contentWindow.document.onmouseup = new Function("updateToolbar()");
    5. document.getElementById('iframeId').contentWindow.document.onfocus = new Function("updateToolbar()");
    6. document.getElementById('iframeId').contentWindow.document.onkeydown = new Function("updateToolbar()");
    7. document.getElementById('iframeId').contentWindow.document.onkeypress = new Function("updateToolbar()");
    8. document.getElementById('iframeId').contentWindow.document.onKeyUp = new Function("updateToolbar()");
    9. }
    10. else if (is_gecko)
    11. {
    13. document.getElementById('iframeId').contentWindow.addEventListener("mouseup", updateToolbar, true);
    14. // document.getElementById('iframeId').contentWindow.addEventListener("click", updateToolbar, true);
    15. document.getElementById('iframeId').contentWindow.addEventListener("focus", updateToolbar, true);
    16. document.getElementById('iframeId').contentWindow.addEventListener("keydown", updateToolbar, true);
    17. document.getElementById('iframeId').contentWindow.addEventListener("keypress", updateToolbar, true);
    18. document.getElementById('iframeId').contentWindow.addEventListener("KeyUp", updateToolbar, true);
    19. }
    Alles anzeigen

    Trotzdem Danke!

    Gruß KMD