Schrift
Start · Board · Weitere Sprachen · HTML, CSS und Javascript
[thread]11713[/thread]

iFrame WYSIWYG

Leser: 1


<< >> 10 Einträge, 1 Seite
Froschpopo
 2008-04-27 15:57
#108910 #108910
User since
2003-08-15
2653 Artikel
BenutzerIn
[default_avatar]
ich habe mal den Editor von dieser Seite hier ausprobiert:
http://christoph.ist-stylish.de/tut/editor.html
Allerdings gibt es dort im Firefox ein Problem, wenn man nämlich strDefTxt nicht übergeben wird oder leer ist.
Wenn beim Aufruf des JavaScripts kein strDefTxt an die initEdit()-Funktion übergeben wird, kann man keinen Text in das iframe schreiben. Es bringt auch nichts, in die Ecke links oben zu klicken, weil dort scheinbar kein fokus ist.
Hat jemand von Euch Spezialisten eine Idee, wie man das beheben könnte?
Ich habe mich auch schon durch execCommand gewühlt, dort gibt es aber auch keine Möglichkeit einen bestimmten Bereich als "editierbar" zu definieren :(
Was mache ich denn jetzt?
Froschpopo
 2008-04-28 08:24
#108926 #108926
User since
2003-08-15
2653 Artikel
BenutzerIn
[default_avatar]
Ich konnte mittlerweile herausbekommen, dass dieses Problem auftritt, wenn ich anstatt mit dem onload-Event im body-tag, die load()-Funktion von jQuery nutze.

Also anstatt: (letzterer Parameter ist strDefTxt)
Code: (dl )
<body onload="initEdit('form_content','edit', '')">


möchte ich:
Code: (dl )
$("body").load(initEdit('form_content','edit', ''));


Das komische hierbei ist folgendes:
Das Script funktioniert einwandfrei.
Aber wenn ich kein strDefTxt vorgeben möchte und den Parameter einfach nicht übergebe, funktioniert das nicht mehr mit load(), sondern nur noch mit dem onload-Event direkt im <body>-Tag.

Laut Doku ist jQuery.load() aber dasselbe wie das onload-Event, blos halt nicht im <body>-Tag, sondern es wird schon vorher ins DOM eingebettet und macht auch den HTML-Code etwas "reiner".
Struppi
 2008-04-28 11:31
#108935 #108935
User since
2006-02-17
628 Artikel
BenutzerIn
[Homepage]
user image
Du musst der Funktion auch eine Funktionsreferenz übergeben, so wie du es machst rufst du die Funktion auf und übergibst dem load Event den Rückgabewert der Funktion initEdit().
Es müßte deshalb auch eine Fehlermeldung geben, guckst du dir nicht die Fehlerkonsole an?

Die Funktionsreferenz kannst du mit einer anonymen Funktion erzeugen:
Code: (dl )
function() {initEdit('form_content','edit', '');}


Das wird auf der jQuery Seite auch so beschrieben: http://docs.jquery.com/Events/load#fn
Struppi
 2008-04-28 11:37
#108936 #108936
User since
2006-02-17
628 Artikel
BenutzerIn
[Homepage]
user image
Noch ein Nachtrag: Ich weiß auch nicht warum du dir es so kompliziert machst. Das Problem steht her seit gestern mittag und wie so oft von dir, mit nur der hälfte der Infos. Nachdem du jquery erwähnt hast, hab ich nach der Doku gesucht (ich benutze das Framework nicht) und bin schnell auf die von mir verlinkte Seite gestossen und dort sind noch mehr Links, z.b. auch bei den Funktionsparametern und wenn ich darauf klicke (was bei Links ja einfach ist), kommt diese Seite: http://docs.jquery.com/Types#Function wo sehr schön das Prinzip erklärt wird. Das alles läßt sich innerhalb weniger Minuten finden, die jquery Doku ist wie ich finde auch sehr gut Strukturiert und sehr ausführlich.

Was hat dich denn abgehalten 10 Minuten zu lesen, anstatt jetzt 24 Stunden zu warten bis jemand dein Problem errät?
Froschpopo
 2008-04-28 17:38
#108953 #108953
User since
2003-08-15
2653 Artikel
BenutzerIn
[default_avatar]
ich habe keine Ahnung worauf du jetzt anspielst.
Ich binde jQuery meiner Meinung nach korrekt ein:
Code: (dl )
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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>Verbessertes Eingabefeld (WYSIWYG-Editor)</title>
		<meta name="AUTHOR" content="con-f-use@gmx.net" />
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<script src="/js/jquery.js" type="text/javascript"></script>

<style type="text/css">
	.imagebutton {
		width: 20px;
		height: 20px;
		border: 0px;
		border-color: #FF0000;
		display: inline; }
	#edit {
		border: solid 1px #CDCDCD; }
	a {
		text-decoration:none; }
	a:hover {
		color: #33FFFF; }
	a:visitied {
		color:#0000FF;
	}
</style>

<script type="text/javascript"><!--
	//coded by con-f-use@gmx.net - be fair and do not remove this

$(document).ready(function () {


	var	formu, ifrm, uagent=navigator.userAgent.toLowerCase(),
		isGecko = ( uagent.match('gecko') && navigator.productSub>=20030210 ),
		isIE = uagent.match('msie') && !uagent.match('opera') && (!uagent.match('msie 5.5')||!uagent.match('msie 6.'));

     $('body').load(function () {initEdit('form_content','edit','')});

	function initEdit(strFormu,strEdit,strDefTxt) {
		formu = document.getElementById(strFormu);
		if (isIE)
			ifrm = window.frames[strEdit].document;
		if (isGecko)
			ifrm = document.getElementById(strEdit).contentWindow.document;
		ifrm.designMode = 'on';
		if (strDefTxt)
			with (ifrm) {
				open();
				write(strDefTxt);
				close();
			}
		var kids = document.getElementsByTagName('div');
		for (i in kids)
			if (kids[i].className == 'imagebutton')
				kids[i].onclick = tbclick;
		document.getElementById(strEdit).contentWindow.focus();
	}

	function tbclick() {
		var id = this.id;
		if (id == 'CreateLink' && isIE)
			ifrm.execCommand(id); 
		else {
			if (id=='FontName' || id=='FontSize') {
				sel = document.getElementById(id).childNodes;
				sel = isIE ? sel[0] : sel[1];
				arg = sel.options[sel.selectedIndex].firstChild.data; } 
			else if (id == 'InsertImage')
				arg = prompt('Enter a image location:', 'http://');
			else if (id == 'CreateLink')
				arg = prompt('Enter a URL:','http://');
			else 
				arg = null;
			ifrm.execCommand(id,false,arg);
		}
	}

	function processData() {
		formu.content.value = ifrm.body.innerHTML;
  		if( !formu.content.value.replace(/<br>|\s|&nbsp;/ig,'') ) {
			alert('You did not enter any Text!');
			return false;
		}
		return true;
	}

 	$('body').load(function () {initEdit('form_content','edit','')});
});
//--></script>

</head>

<body><div style="position:absolute;left:10px;top:10px">

<form onsubmit="return processData()" id="form_content" action="" method="post"><div>
	<div class="imagebutton" id="FontSize">
		<select>
			<option>1</option>

			<option>2</option>

			<option selected="selected">3</option>
			<option>4</option>
			<option>5</option>
			<option>6</option>
			<option>7</option>

	   </select>

	</div>&nbsp;&nbsp;
	
	<div class="imagebutton" id="FontName">
		<select>
			<option>Arial</option>
			<option selected="selected">Times New Roman</option>
			<option>Comic Sans MS</option>

		</select>

	</div><br />
	
	<div class="imagebutton" id="bold">
		<a href="#" onclick="return false" style="font-weight:bold">B</a>
	</div>&nbsp;&nbsp;

	<div class="imagebutton" id="italic">
		<a href="#" onclick="return false" style="font-style:italic">I</a>

	</div>&nbsp;&nbsp;

	<div class="imagebutton" id="underline">
		<a href="#" onclick="return false" style="text-decoration:underline">U</a>
	</div>&nbsp;&nbsp;

	<div class="imagebutton" id="justifyleft">
		<a href="#" onclick="return false">left</a>
	</div>&nbsp;&nbsp;

	<div class="imagebutton" id="justifycenter">
		<a href="#" onclick="return false">center</a>
	</div>&nbsp;&nbsp;

	<div class="imagebutton" id="justifyright">
		<a href="#" onclick="return false">right</a>
	</div>&nbsp;&nbsp;

	<div class="imagebutton" id="insertorderedlist">

		<a href="#" onclick="return false">odered list</a>
	</div>&nbsp;&nbsp;

	<div class="imagebutton" id="insertunorderedlist">
		<a href="#" onclick="return false">unordered list</a>
	</div>&nbsp;&nbsp;

	<div class="imagebutton" id="CreateLink">

		<a href="#" onclick="return false">link</a>
	</div><br />
	
	<div class="imagebutton" id="indent">
		<a href="#" onclick="return false">indent</a>
	</div>&nbsp;&nbsp;
	
	<div class="imagebutton" id="outdent">
		<a href="#" onclick="return false">outdent</a>

	</div>&nbsp;&nbsp;
	
	<div class="imagebutton" id="InsertImage">
		<a href="#" onclick="return false">insert image</a>
	</div>
	
	<br /><iframe id="edit" name="edit" width="400" height="200" frameborder="0" marginheight="0" marginwidth="0"></iframe>
	<textarea name="content" style="display:none"></textarea>

	<div style="width: 400px;" align="right">
		<input type="submit" value="Submit!" />

	</div>
</div></form>

</div></body></html>

Das funktioniert ja auch so wie ich es gemacht habe.
Blos, dass man nichts ins iframe schreiben kann, wenn strDefTxt nicht angegeben wird.
Ich kann strDefTxt auch über load() angeben, dann funktionierts ja auch problemlos!
Aber eben nicht, wenn ich es wie im obigen Beispiel leer lasse! "Leer lassen" funktioniert nur, wenn ich initEdit() im <body> aufrufe.

@Struppi: Ja natürlich habe ich sie gelesen, sonst käme ich ja garnicht auf die Idee mit load onclick ersetzen zu können.
Struppi
 2008-04-28 18:00
#108954 #108954
User since
2006-02-17
628 Artikel
BenutzerIn
[Homepage]
user image
Es macht einfach keinen Spaß dir zu Antowrten, weiter oben zeigst du uns diesen Code:
$("body").load(initEdit('form_content','edit', ''));

Der völlig anders ist als den Code den du jetzt zeigst.
$('body').load(function () {initEdit('form_content','edit','')});

Ich hab keine Lust mir Gedanken über dein Problem zu machen, wenn du uns sowieso nicht zeigst was du machst. Erst verschweigst du uns was du überhaupt vor hast und machst, dann zeigst du uns Code, den du so nicht verwendest.
Froschpopo
 2008-04-28 18:08
#108955 #108955
User since
2003-08-15
2653 Artikel
BenutzerIn
[default_avatar]
Ja im obigen Beispiel habe ich auch etwas funktionierendes gezeigt.
Im Gegensatz zu
Code: (dl )
$('body').load(function () {initEdit('form_content','edit','dies ist ein test')});

funktioniert das hier:
Code: (dl )
$('body').load(initEdit('form_content','edit','dies ist ein Test'));

... mit einem Übergabeparameter. Keine Ahnung warum.
Im iframe steht dann hinterher "dies ist ein Test".
Bei der Funktionsreferenz klappt das nicht.
Eine Fehlermeldung gibt es nicht.
Es wirkt nach außen so, wie als ob der initEdit()-aufruf schlicht ignoriert wird.
Froschpopo
 2008-04-28 20:52
#108958 #108958
User since
2003-08-15
2653 Artikel
BenutzerIn
[default_avatar]
Ich habe das Problem jetzt so weit wie möglich zurückverfolgt bis ich am Ende nur noch ein 3-Zeilen-JavaScript hatte:

Beispiel 1: (funktioniert nicht)
Code: (dl )
1
2
3
4
5
<script type="text/javascript">
	$(document).ready(function () {
 		$('body').load(function () { alert("funktioniert NICHT") });
	});
</script>


Beispiel 2: (funktioniert)
Code: (dl )
1
2
3
4
5
6
7
8
9
10
<script type="text/javascript">
	$(document).ready(function () {
		alert("funktioniert!");
 		$('body').load(test);
	});

	function test () {
		alert("hallo welt");
	}
</script>


Ich versteh die welt nicht mehr :(
Wieso funktioniert Beispiel 1 nicht?
Froschpopo
 2008-04-28 22:15
#108959 #108959
User since
2003-08-15
2653 Artikel
BenutzerIn
[default_avatar]
Ah jetzt hab ichs:

Es muss heissen:
Code: (dl )
$(window).load(func);


Allerdings war das reiner Zufall, dass ich es mit window versucht hatte.
Da kommt ja auch keine Sau drauf, dass sowas mit $("body") nicht funktioniert. Weil: Wo in der Doku steht sowas?
Struppi
 2008-04-28 22:33
#108960 #108960
User since
2006-02-17
628 Artikel
BenutzerIn
[Homepage]
user image
Froschpopo+2008-04-28 20:15:57--
Allerdings war das reiner Zufall, dass ich es mit window versucht hatte.
Da kommt ja auch keine Sau drauf, dass sowas mit $("body") nicht funktioniert. Weil: Wo in der Doku steht sowas?

http://docs.jquery.com/Events/load#fn
<< >> 10 Einträge, 1 Seite



View all threads created 2008-04-27 15:57.