nicht angemeldet
CSS in iframe einbinden
0 0 Eigentor
0
CSS in iframe einbinden
Hallo,
ich benutze einen WYSIWYG-Editor (<a href="http://www.entwicklungshilfe.de/submit.php" target="_blank">http://www.entwicklungshilfe.de/submit.php</a>, der mit einem iframe arbeitet. Mein Problem ist, dass meine Seite selbst CSS-Style-Sheets verwendet und somit Größenangaben nicht berücksichtigt werden. Dieser Umstand wird bei dem WYSIWYG-Editor nicht berücksichtigt. Wie kann ich es einrichten, dass meine CSS-Datei auch für den iframe gilt? Damit man genau das sieht, was man am Ende auch bekommt.
Die Dateien für den Editor habe ich mal hier gespeichert: www.ieh.de/wysiwyg_editor.zip
Wobei die Datei pdedit.php in den iframe geladen wird. Es bringt aber nichts, wenn ich in diese Datei in den Header die CSS-Datei angebe...
Ich weiß wirklich nicht mehr weiter...
-
Hallo Jamany,
ich benutze einen WYSIWYG-Editor (<a href="http://www.entwicklungshilfe.de/submit.php" target="_blank">http://www.entwicklungshilfe.de/submit.php</a>, der mit einem iframe arbeitet.
wie man in diesem Forum Links in den Beitrag einbautm kannst Du hier
nachlesen: /faq/#Q-19Kurzfassung: <DEIN_URL>
Wie kann ich es einrichten, dass meine CSS-Datei auch für den iframe gilt?
Die CSS-Datei muß in der Datei referenziert sein, für welche die
CSS-Definitionen gelten sollen. Ob die Datei in einem Iframe an-
gezeigt wird oder nicht, ist dabei unerheblich.Wobei die Datei pdedit.php in den iframe geladen wird. Es bringt aber nichts, wenn ich in diese Datei in den Header die CSS-Datei angebe...
Doch, die CSS-Definitionen müssen dann in der Datei pdedit.php
stehen bzw. in dieser Datei muß die CSS-Datei referenziert sein.Ehrlich gesagt kann ich Dein Problem im Moment nicht so ganz nach-
vollziehen, unter der angegebenen Adresse sieht für mich soweit
alles ganz normal aus, d.h. da fehlt offenbar kein CSS.
Und extra die ZIP-Datei herunterladen und da reinschauen, ist mir
zuviel Aufwand, vielleicht schilderst Du einfach nochmal das Pro-
blem genauer.Viele Grüße,
Stefan-
wie man in diesem Forum Links in den Beitrag einbautm kannst Du hier
nachlesen: /faq/#Q-19ja und so ist das, wenn man die Links erst unmittelbar vor dem Ab-
senden des Beitrages einbaut, dann vergisst man die auch schonmal,
sollte natürlich so aussehen:wie man in diesem Forum Links in den Beitrag einbaut, kannst Du hier
nachlesen: </faq/#Q-19>Viele Grüße,
Stefan -
Die CSS-Datei muß in der Datei referenziert sein, für welche die
CSS-Definitionen gelten sollen. Ob die Datei in einem Iframe an-
gezeigt wird oder nicht, ist dabei unerheblich.Doch, die CSS-Definitionen müssen dann in der Datei pdedit.php
stehen bzw. in dieser Datei muß die CSS-Datei referenziert sein.Aber genau das ist mein Problem.
Ehrlich gesagt kann ich Dein Problem im Moment nicht so ganz nach-
vollziehen, unter der angegebenen Adresse sieht für mich soweit
alles ganz normal aus, d.h. da fehlt offenbar kein CSS.
Und extra die ZIP-Datei herunterladen und da reinschauen, ist mir
zuviel Aufwand, vielleicht schilderst Du einfach nochmal das Pro-
blem genauer.Ich versuche es einfach nochmal etwas genauer:
Also folgende PHP-Seite (pdedit.php) wird eingebunden - zur Vereinfachung hier der Quelltext: (Die CSS-Datei wird hier eingebunden)
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<LINK REL="StyleSheet" HREF="themes/XP-Silver/style/style.css" TYPE="text/css">
</head>
<STYLE>
BODY {margin: 0pt; padding: 0pt; border: none}
IFRAME {width: 100%; height: 100%; border: none}
</STYLE>
<SCRIPT>
// Default format is WYSIWYG HTML
var format="HTML"// Set the focus to the editor
function setFocus() {
textEdit.focus()
}// Execute a command against the editor
// At minimum one argument is required. Some commands
// require a second optional argument:
// eg., ("formatblock","<H1>") to make an H1function execCommand(command) {
textEdit.focus()
if (format=="HTML") {
var edit = textEdit.document.selection.createRange()
if (arguments[1]==null)
edit.execCommand(command)
else
edit.execCommand(command,false, arguments[1])
edit.select()
textEdit.focus()
}
}// Selects all the text in the editor
function selectAllText(){var edit = textEdit.document;
edit.execCommand('SelectAll');
textEdit.focus();}
function newDocument() {
textEdit.document.open()
textEdit.document.write("")
textEdit.document.close()
textEdit.focus()
}//function loadDoc(htmlString) {
// textEdit.document.open()
//
// htmlString=window.opener.document.main.edit.value;
//
//htmlString='Resting';
// textEdit.document.write(htmlString)
// textEdit.document.close()
//}
// Initialize the editor with an empty document
function initEditor() {
var htmlString = parent.document.all.story.value;
textEdit.document.designMode="On"
textEdit.document.open()
textEdit.document.write(htmlString)
textEdit.document.close()
textEdit.focus()
}// Swap between WYSIWYG mode and raw HTML mode
function swapModes() {
if (format=="HTML") {
textEdit.document.body.innerText = textEdit.document.body.innerHTML
textEdit.document.body.style.fontFamily = "monospace"
textEdit.document.body.style.fontSize = "10pt"
format="Text"
}
else {
textEdit.document.body.innerHTML = textEdit.document.body.innerText
textEdit.document.body.style.fontFamily = ""
textEdit.document.body.style.fontSize =""
format="HTML"
}
// textEdit.focus()
var s = textEdit.document.body.createTextRange()
s.collapse(false)
s.select()
}window.onload = initEditor
</SCRIPT>
<!-- Turn off the outer body scrollbars. The IFRAME editbox will display its
own scrollbars when necessary -->
<BODY SCROLL=No><IFRAME ID=textEdit>
</IFRAME>
<script>
textEdit.focus();
</script>
</body>
</html>-------
Über http://www.entwicklungshilfe.de/submit.php wird dann folgendes aufgerufen:
(Innerhalb eines Formulars):
<textarea name="hometext" style="display: none;"></textarea><iframe id="myEditor" src="./pdedit.php?textareaname=hometext" onFocus="initToolBar(this,'myEditor')" width=100% height=100%></iframe>
Auf der Seite selbst geht das CSS. Mein Problem ist, dass man in dem Editor - der ja ein WYSIWYG-Editor sein sollte - nicht exakt das sieht, was man dann später auf der Seite sieht.
z.B. ist ja auf der Seite die Schriftgröße festgelegt. In dem Editor nicht - da kann man die Schriftgröße beliebig ändern. Und das ist nur ein Beispiel. Damit in dem Editor-Feld exakt das gleiche angezeigt werden kann, wie es auch später online aussieht, müsste bereits in diesem Feld die verwendete CSS-Datei gelten und eingebunden sein. Aber genau das geht nicht...Jamany
-
Hallo Jamany,
ganz, ganz wichtig: </faq/#Q-07d>!
Bisher hatte ich die Sache mir nur im Opera 6.04 und Mozilla 1.0
angesehen und habe immer etwas gerätselt, was Du da mit WYSIWYG-
Editor meinst. Also, beim nächsten Mal sagst Du bitte unbedingt
gleich dazu, dass es um einen bestimmten Browser geht, danke!Ich versuche es einfach nochmal etwas genauer:
wenn ich es richtig sehe (MSIE), dann ist lediglich das Editor-
Fenster innerhalb des Iframes, d.h. direkt in der pdedit.php muß das
Stylesheet referenziert sein ...<LINK REL="StyleSheet" HREF="themes/XP-Silver/style/style.css" TYPE="text/css">
und genau diese Zeile kann ich im Quelltext nicht finden. Schau Dir
mal den Quelltext von http://www.entwicklungshilfe.de/pdedit.php in
einem Browser ohne JavaScript an (sonst bekommst Du nur unnötige
Fehlermeldungen), da fehlt diese Zeile. Also schaue mal in die unge-
parste PHP-Seite, wo Du diese Zeile noch einfügen kannst.Ein anderes Problem wird dann allerdings auftauchen:
Der Editor arbeitet ja offenbar mit font und ähnlichen Dingen, die
(theoretisch) durch die CSS-Definitonen überschrieben werden. D.h.
aber auch, dass dann jemand Deinen Editor benutzt und nicht sieht,
was bei einer Änderung der Schriftgröße o.ä. geschieht. Vielleicht
solltest Du die Funktionsvielfalt dann auf die Sachen beschränken,
die nicht durch die CSS-Datei überschrieben werden.Insgesamt muß ich sagen, dass mir die Mozilla- und Opera-Version
deutlich besser gefällt, da sieht vielleicht der Editier-Modus
nicht so schick aus, aber spätestens in der Vorschau passt es ja
wieder und sieht so aus, wie es später mal angezeigt wird. OK, so
Sachen wie Links sind da natürlich sehr schwierig, zumindest für
ungeübte Benutzer.Mußt Du mal schauen, entweder den Editor auf die für den Benutzer
sinnvollen Funktionen beschränken (im MSIE) oder für alle Browser
die einfache Variante mit den Textfeldern anbieten.Viele Grüße,
Stefan
-
-