You are not logged in.

  • Login

Eventhandler für das Bearbeiten eines Iframes

KMD

Intermediate

  • "KMD" started this thread

Posts: 135

  • Send private message

1

Tuesday, May 15th 2007, 8:21pm

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

JavaScript Code

 
1
2
3

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


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

Torben Brodt

Administrator

Posts: 8,454

  • Send private message

2

Sunday, June 10th 2007, 6:06pm

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/

HTML Code

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

<!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;
}
 
window.onload = function() {
  var editorDoc = document.getElementById('editor').contentWindow.document;
  editorDoc.designMode="on";
 
  editorDoc.execCommand('fontname', false, 'Times New Roman');
  editorDoc.execCommand('fontsize', false, '12');
  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>
Latest blogs Latest blogs: Neuer EX4 Server, Java EE Summit im Juni in München, Kostenlos zur Cebit + Windows 8 Entwickler Schulung

KMD

Intermediate

  • "KMD" started this thread

Posts: 135

  • Send private message

3

Tuesday, June 12th 2007, 8:29am

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.

JavaScript Code

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

if (is_ie4up)
	{
//		document.getElementById('iframeId').contentWindow.document.onclick = new Function("updateToolbar()");
		document.getElementById('iframeId').contentWindow.document.onmouseup = new Function("updateToolbar()");
		document.getElementById('iframeId').contentWindow.document.onfocus = new Function("updateToolbar()");
		document.getElementById('iframeId').contentWindow.document.onkeydown = new Function("updateToolbar()");
		document.getElementById('iframeId').contentWindow.document.onkeypress = new Function("updateToolbar()");
		document.getElementById('iframeId').contentWindow.document.onKeyUp = new Function("updateToolbar()");
    }
    else if (is_gecko)
	{
 
		document.getElementById('iframeId').contentWindow.addEventListener("mouseup", updateToolbar, true);
//		document.getElementById('iframeId').contentWindow.addEventListener("click", updateToolbar, true);
		document.getElementById('iframeId').contentWindow.addEventListener("focus", updateToolbar, true);
		document.getElementById('iframeId').contentWindow.addEventListener("keydown", updateToolbar, true);
		document.getElementById('iframeId').contentWindow.addEventListener("keypress", updateToolbar, true);
		document.getElementById('iframeId').contentWindow.addEventListener("KeyUp", updateToolbar, true);
    }

Trotzdem Danke!

Gruß KMD

Similar threads

Tagging

Social bookmarks