Um bei Importen (z. B. über die API (Cloud-Connect)) Inhalte anzulegen, die über reinen Text hinausgehen (z.B. Einbettungen), müssen die HTML- & BBCode-Tags genutzt werden. Diese werden auch vom PEIQ PORTAL verwendet und daher entsprechend korrekt verarbeitet.
Funktionalitäten der Content Tags
Textauszeichnungen über BBCode-Tags
Einfügen von externen Inhalten über Einbettungen
Inhaltsverzeichnis
Details
Textauszeichnungen müssen als HTML-Tag übergeben werden, für Einbettungen muss BBCode verwendet werden.
In den Inhaltsformularen der einzelnen Module ist eine direkte Eingabe von HTML-Tags aus Sicherheitsgründen nicht erlaubt. Stattdessen wird ein definiertes Set von BBCode-Tags unterstützt, mit denen Inhalte angereichert werden können. Weitere Infos siehe Editor im PORTAL (BBCode).
Ablage des BBCode-Textes in der Datenbank
Sobald ein Inhalt gespeichert und in die Datenbank übertragen wird, werden die eingegebenen BBCodes teilweise in HTML konvertiert, bevor der Text in der Datenbank abgelegt wird. Andere BBCodes werden beibehalten. Weitere Informationen finden sich hier: Ablage des BBCode-Textes in der Datenbank
Öffnet man den Inhalt im Editor, so werden die unterstützten HTML-Tags wieder als BBCode angezeigt, sodass diese ohne Probleme bearbeitet werden können.
Importierte HTML-Tags im Editor
Prinzipiell gibt es keine Filterung von HTML-Tags bei der Darstellung von Inhalten, sie werden direkt und ohne Escaping ausgegeben. Es ist also möglich, über die verschiedenen API- und Import-Funktionen beliebigen HTML-Code in das Portal einzuspielen.
Bearbeitet man aber im Editor einen solchen Inhalt, so werden die nicht unterstützten HTML-Tags in Entities umgewandelt und damit beim Speichern unbrauchbar gemacht.
Bei Importen müssen diese Besonderheiten berücksichtigt und die zu importierenden Inhalte entsprechend aufbereitet werden: Textauszeichnungen müssen als HTML-Tag übergeben werden, für Einbettungen muss BBCode oder HTML verwendet werden.
Textauszeichnungen
Textauszeichnungen müssen bei Importen als HTML-Tag übergeben werden. Sofern die unten aufgelistete Syntax eingehalten wurde, können die Inhalte im Editor normal bearbeitet werden.
Unterstützte HTML-Tags
Beschreibung | HTML-Tag beim Import | Anzeige im Editor |
|---|---|---|
Zwischenüberschrift |
|
|
Fett |
|
|
Kursiv |
|
|
Unterstrichen |
|
|
Hochgestellt |
|
|
Tiefgestellt |
|
|
Ungeordnete Liste
|
Beispiel: <ul><li>Eins</li><li>Zwei</li><li>Drei</li></ul> |
Beispiel: [list][*]Eins[/*][*]Zwei[/*][*]Drei[/*][/list] |
Geordnete Liste |
Beispiel: <ol><li>Eins</li><li>Zwei</li><li>Drei</li></ol> |
Beispiel: [list=1][*]Eins[/*][*]Zwei[/*][*]Drei[/*][/list] |
Zitat |
Beispiel: <quote>Gute Geschichten erfolgreich machen<quote> |
Beispiel: [quote]Gute Geschichten erfolgreich machen[/quote] |
Hyperlink
|
Beispiel: <a href="https://www.google.com" rel="nofollow">Google</a> |
Beispiel: [url=https://www.google.de]Google[/url] |
Hyperlink, der in einem neuen Fenster öffnet. |
Beispiel: <a href="https://www.google.com" onclick="window.open(this.href); return false;" rel="nofollow">Google</a> |
Beispiel: [urlnt=https://www.google.com]Google[/urlnt] |
Absätze können beim Import über das Steuerzeichen “\n” eingefügt werden.
Hinweise zu <a>-Tags
Über den Editor eingegebene Links werden beim Speichern des Inhalts direkt mit dem korrekten rel-Attribut versehen. Details finden sich hier: nofollow, sponsored & ugc
Bei der oben beschriebenen Verarbeitungsweise handelt es sich jedoch um eine Funktion des Editors!
Bei zu importierenden Inhalten müssen die rel-Attribute mitgegeben werden. Hierbei ist zu berücksichtigen, dass die Reihenfolge der Attribute strikt eingehalten werden muss:
Nach dem <a> muss das href-Attribut folgen, dann das rel-Attribut.
Beispiele:
<a href="https://www.google.com" rel="nofollow">Google</a> <a href="https://www.google.com" onclick="window.open(this.href); return false;" rel="nofollow">Google</a>
Wichtiger Hinweis: Sobald der importierte Inhalt im Editor geöffnet wird, werden die HTML-Tags in die BBCode-Tags [url] bzw. [urlnt] umgewandelt und das über den Import mitgegebene rel-Attribut verworfen. Beim Speichern zieht die entsprechende Logik des PORTALs ( → siehe nofollow, sponsored & ugc ).
Unterstützte Einbettungen
Einbettungen werden zum Einfügen von externen Inhalten verwendet (z.B. YouTube-Videos). Da es sich bei diesen Inhaltsformen oft um dynamisch generierte Codefragmente handelt, werden bei Einbettungen die BBCode-Tags nicht transformiert, sondern direkt in die Datenbank geschrieben. Bei der Darstellung der Inhalte im PORTAL wird dann zur Laufzeit der entsprechende Code eingefügt.
Folgende Tags werden für Einbettungen unterstützt:
[video] Einbettung von Videos. Unterstützt werden YouTube, Vimeo und APA. Innerhalb der Tags muss die URL des Videos stehen.
Beispiele: [video]https://www.youtube.com/watch?v=wZb5SGpv3RU[/video] [video]https://vimeo.com/54785974[/video]
[map] Einbettung von iFrame-Karten. Unterstützt werden Google Maps, Google My Maps und OpenStreetMap. Innerhalb der Tags muss die iFrame-src-URL der Karte stehen.
Beispiele: [map]https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d10604.94119928147!2d10.8967622!3d48.3560021!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xd2915ac686271fad!2sGogol+Publishing!5e0!3m2!1sde!2sde!4v1506516680490[/map] [map]https://www.google.com/maps/d/embed?mid=1FRnNtkcAZZ9bXYj6d6IkLmP_NBI[/map] [map]http://www.openstreetmap.org/export/embed.html?bbox=10.856251716613771%2C48.357161569178395%2C10.914187431335451%2C48.37823098427322&layer=mapnik[/map]
[twitter] Einbindung eines Twitter-Posts.
Beispiel: [twitter]https://twitter.com/Astro_Alex/status/519795406377861120[/twitter]
[instagram] Einbindung eines Instagram-Posts.
Beispiel: [instagram]https://www.instagram.com/p/BYCTgxsAPdw/[/instagram]
[facebook] Einbindung eines Facebook-Posts.
Beispiel: [facebook]https://www.facebook.com/les.chats.mignons/photos/a.373652229420146.1073741828.373006119484757/1280135262105167/[/facebook]
[tumblr] Einbindung eines Tumblr-Posts.
Beispiel: [tumblr] http://sabonhomeblog.tumblr.com/post/164408606674[/tumblr]
Einbettungen von internen Inhalten
Ein Teil der Einbettungen von internen Inhalten müssen als Platzhalter-<div> importiert werden. Der Platzhalter wird erst beim Ausspielen durch den entsprechenden Embed-Code ersetzt. Ein anderer Teil der BBCodes wird als BBCode importiert. Auch in diesem Fall wird der BBCode-Platzhalter beim Ausspielen durch ein entsprechendes <div> ersetzt.
Beschreibung | Tag beim Import | Anzeige im Editor |
|---|---|---|
Ein am Beitrag hochgeladenes Bild, welches im Text des Beitrags eingebettet wurde. | <div data-media-eimg="{Bild-ID}"></div>
| [eimg={Bild-ID}]https://Ziel-URL-des-Bildes.png[/eimg]
|
Ein im Text eingebetteter Medienstream. | <div data-media-estm="{Medienstream-ID}"></div>
| [estm={Medienstream-ID}]Ziel-URL des Vorschaubilds[/estm]
|
Eingebetteter Teaser auf einen Beitrag.
| <div data-article-earticle="{Beitrag-ID}" data-article-earticle-layout="default">Überschrift des Beitrags</div>
<div data-article-earticle="{Beitrag-ID}" data-article-earticle-layout="image-gallery">Überschrift des Beitrags</div>
| [earticle={Beitrag-ID} layout=default]Überschrift des Beitrags[/earticle]
[earticle={Beitrag-ID} layout=image-gallery]Überschrift des Beitrags[/earticle]
|
Eingebetteter Teaser auf einen Schnappschuss. | <div data-article-eimagepost="{Schnappschuss-ID}">Überschrift des Beitrags</div>
| [eimagepost={Schnappschuss-ID}]Überschrift des Beitrags[/eimagepost]
|
Eingebetteter Teaser auf eine Veranstaltung.
| <div data-eventcalendar-eeventitem="{Veranstaltung-ID}" data-eventcalendar-eeventitem-layout="default">Überschrift der Veranstaltung</div>
<div data-eventcalendar-eeventitem="{Veranstaltung-ID}" data-eventcalendar-eeventitem-layout="image-gallery">Überschrift der Veranstaltung</div>
| [eeventitem={Veranstaltung-ID} layout=default]Überschrift der Veranstaltung[/eeventitem]
[eeventitem={Veranstaltung-ID} layout=image-gallery]Überschrift des Veranstaltung[/eeventitem]
|
Eingebettete Aktion. Weitere Informationen zu Aktionen finden sich hier. | [paevent={Aktion-ID}]Titel der Aktion[/paevent]
| [paevent={Aktion-ID}]Titel der Aktion[/paevent]
|
Markierung der Lesebeschränkung bei Premium-Inhalten
Die Markierung der Lesebeschränkung bei Premium-Inhalten muss als HTML-Tag importiert werden:
Beschreibung | Ablage in der Datenbank | Anzeige im Editor |
|---|---|---|
Markierung der Lesebeschränkung bei Premium-Inhalten. Weitere Informationen zur Lesebeschränkung finden sich hier. | <premium-teaser> | [pcrm][/pcrm]
|
Exporte
Das Verhalten bei Exporten ist hier beschrieben: Ablage des BBCode-Textes in der Datenbank