Dieser Beitrag basiert auf dem Forumeintrag von NaN.
In CMS Made Simple gibt es das {embed} Plugin um externe Seiten als iframe im Editor einzubauen. So z.B. eine GoogleMap oder ein Forum.
1. Problem: Editor „verschandelt“ HTML-Code
Genaugenommen verschandelt der Editor da nichts.
Wenn ich im Editor z.B. folgenden Google-Code eingebe:
Code:
<br /> src="http://maps.google.de/maps?f=q&source=s_q&hl=de&geocode=&q=Dorfstra<br /> %C3%9Fe+31,+13051+Berlin&sll=52.524316,13.45277&sspn=0.008577,0.027895&ie=UTF8&<br /> amp;ll=52.587928,13.487091&spn=0.015644,0.025749&z=14&iwloc=A&output=embed">
Dann macht der WYSIWYG-Editor lediglich seine Arbeit und wandelt den kompletten Code so um, dass er genauso wie hier eingegeben auch auf der Internetseite angezeigt wird.
Als reiner Text.
Nicht als HTML.
(WYSIWYG eben)
Lösung:
HTML Code immer im HTML-Modus eingeben.
Aus dem 1. Problem folgt das 2. Problem: im WYSIWYG-Modus des Editors wird das iFrame nicht korrekt dargestellt.
Das ist wohl ein Problem das sich nicht so ohne weiteres Lösen lässt.
Es liegt vielleicht daran, dass der Editor ja selbst ein iFrame ist, dessen Inhalt mit massiven Einsatz von Javasrcipt gesteuert wird.
Und bei externen Inhalten in Iframes gelten für JavaScript gewisse Einschränkungen.
Außerdem würde beim Bearbeiten einer Seite mit einem iFrame im Inhalt der (beim Erstellen erfolgreich im HTML-Modus eingefügte) iFrame Code wieder „verschandelt“ werden.
Lösung:
keinen HTML-Code für die Anzeige eines iFrames verwenden.
Stattdessen liefert CMSms bereits eine Funktion namens {embed}, mit deren Hilfe sich iFrames ganz ohne Verwendung von HTML sowohl im HTML-Modus als auch im WYSIWYG-Editor einfügen lassen.
Kurz gesagt funktioniert der Tag folgendermaßen:
Code:
{embed url="URL zur Google Map" width="425px" height="325px"}
Was ist die URL zur Google Map?
(Kleiner Tipp: Es ist nicht der komplette von Google angegebene Code.)
1. Man gebe bei Google-Map eine Adresse ein, die man auf seiner Seite anzeigen möchte.
2. Man wähle rechts oben über der Karte die Option „Link“.
Dort nichts kopieren!
Statdessen besser auf den Link „Eingebettete Karte anpassen und Vorschau anzeigen“ klicken.
3. Es erscheint ein neues Fenster mit einem Ausschnitt der Karte.
Diesen Ausschnitt kann man hier in Größe und Position an seine Internetseite anpassen.
4. Ist man zufrieden, kopiert man vom Google-iFrame-Code nur die URL, die im iFrame angezeigt werden soll.
Bei Iframes ist das das src-Attribut.
Das ist ein ewig langes Monstrum, bei dem man nicht genau erkennt wo es anfängt bzw. aufhört:
(rot markiert)
http://maps.google.de/maps?f=q&source=s_q&hl=de&geocode=&q=Dorfstra%C3%9Fe+31,+13051+Berlin&sll=52.524316,13.45277&sspn=0.008577,0.027895&ie=UTF8&ll=52.587928,13.487091&spn=0.015644,0.025749&z=14&iwloc=A&output=embed</div> <p>"><br />
...
5. Nun fügt man im Editor diese URL als Wert für den Parameter „url“ ein.
Für die Parameter „width“ und „height“ nimmt man am besten die gleichen Werte, die man beim Anpassen
seiner Karte verwendet hat.
Hinweis 1:
Die Parameter „width“ und „height“ erwarten konkrete Einheiten.
Einfach nur die Zahl (z.B. width=“300″) reicht nicht aus.
Richtig ist width=“300px“ (für Pixel) oder width=“100%“ (für realtive Größen).
Hinweis 2:
Google hat Sonderzeichen in der URL bereits mit HTML Entities maskiert (also aus „&“ wurde bereits „&“).
Wenn man die URL jetzt so wie sie ist im WYSIWYG-Modus im Editor einfügt, werden diese Zeichen doppelt konvertiert.
D.h. aus „&“ wird „&amp;“.
Was zur Folge hat, dass die Karte auf der Internetseite nicht korrekt dargestellt werden kann.
Daher – wie bereits beim ersten Problem erwähnt – die URL immer im HTML-Modus einfügen.
Dies gilt nur fürs Einfügen der URL.
Nicht für das spätere Nachbearbeiten der Seite.
Beim späteren Bearbeiten gibt es keinerlei Probleme, da der Editor bereits konvertierte HTML Entities für die Anzeige im Editor nicht noch einmal zu konvertieren braucht.
Hinweis 3:
Das embed-Plugin das CMS Made Simple beiliegt, ist seit längerem nicht aktualisiert worden. Aus diesem Grund kursiert bereits seit längerem eine modifizierte Version im Forum von CMS Made Simple.
Download modifizierte Version.
Erst in der modifizierten Version werden die Tags width, height und style berücksichtigt.