Editor im PORTAL (BBCode)

Im PORTAL ist der WYSIBB-Rich-Text-Editor in Verwendung, welcher auf BBCode basiert. Der Editor ist full responsive. Neben den bereits im Editor vorhandenen Funktionen wurde der Open Source-Code für die Integration in die PORTAL-Lösung teilweise auf die PEIQ-spezifischen Bedarfe angepasst.

Funktionalitäten des Editors im PORTAL

Ermöglicht die einfache Erstellung von Inhalten im PEIQ PORTAL
Einfügen von Formatierungen und Einbettungen über Buttons in der Editorleiste oder in der BBCode-Ansicht über Direkteingabe
Umschaltmöglichkeit zwischen Rich-Text und BBCode

Inhaltsverzeichnis

1 BBCode
- 1.1 Was ist BBCode?
- 1.2 Warum BBCode und kein HTML?
2 Implementierung
- 2.1 Unterstützte Formatierungen
- 2.2 Links
- 2.3 Embeds / Einbettungen
  - 2.3.1 Social-Media-, Video- & Karten-Embeds
  - 2.3.2 Mitmachaktion erstellen und einbetten
  - 2.3.3 Code einbetten
  - 2.3.4 Bild einbetten
  - 2.3.5 Beitrag, Schnappschuss, Veranstaltung oder Bildergalerie einbetten
  - 2.3.6 Manuelle Lesebeschränkung für Premium Inhalte
3 Verwandte Seiten

BBCode

Was ist BBCode?

BBCode (von engl. Bulletin Board Code) ist eine an HTML angelehnte, jedoch vereinfachte Auszeichnungssprache, die bevorzugt für die Erstellung von Beiträgen in Webforen (engl. Bulletin Boards) eingesetzt wird. BBCode ist nicht offiziell reglementiert, stellt aber wegen seiner hohen Verbreitung einen Quasi-Standard sowie eine Best Current Practice dar (Wikipedia - BBCode). Eine Übersicht über Best-Practice-BBCodes gibt es hier:

Warum BBCode und kein HTML?

Der BBCode-Editor ist so implementiert, dass nur erlaubte, aktivierte und sicher implementierte Auszeichnungen funktionieren. Im Gegensatz zu HTML-Editoren ist das Rausparsen von nicht erlaubten Code-Elementen nicht mehr notwendig. So werden Sicherheitsprobleme (z.B. über Einbindungen von Javascripts) umgangen.

Benutzer:innen, die das Recht für die Funktion Code einbetten haben, müssen die Sicherheit und Funktionalität der eingefügten HTML-Codes selbst gewährleisten.

Implementierung

Im PORTAL wird der BBCode-Editor vom Beitragsformular, Profil bearbeiten, Veranstaltungsformular, Stellenmarktformular für gestaltete Anzeigen sowie beim Kommentare erstellen in unterschiedlichen Konfigurationen verwendet.

In der Ansicht kann zwischen Rich-Text und BBCode umgeschaltet werden. Formate können in der BBCode-Ansicht auch über Direkteingabe angegeben werden. Zudem werden Formatierungen eines kopierten und eingefügten Textes teilweise übernommen.

Der Editor unterstützt Formatierungen sowie verschiedene Arten von Embeds (Einbettungen). Beide Varianten werden über BBCode ausgezeichnet.

Unterstützte Formatierungen

Zwischenüberschrift (H2): Die Zwischenüberschrift wird als H2 auf der Beitragsdetailseite abgebildet.
[h2][/h2]
Fett: [b][/b]
Kursiv: [i][/i]
Unterstrichen: [u][/u]
Hochgestellt: [sup][/sup]
Tiefgestellt: [sub][/sub]
Ungeordnete Liste:

[list][*]Erster Punkt 
[/*][*]Zweiter Punkt
[/*][*]Dritter Punkt.  
[/*][*]Vierter Punkt 
[/*][/list]

Nummerierte / geordnete Liste:

[list=1][*]Erster Punkt 
[/*][*]Zweiter Punkt
[/*][*]Dritter Punkt.  
[/*][*]Vierter Punkt 
[/*][/list]

Zitat / Blockquote: [quote]Hier steht dann das Zitat [/quote]
Lesebeschränkung für Premium-Inhalte: [pcrm][/pcrm]

Links

Anchortext und URL-Eingabe werden über ein Formular eingegeben.

Links sind auf standardmäßig auf rel="nofollow" gesetzt, um Google-Strafen zu vermeiden. Siehe Googles Qualitätsrichtlinien. Ausnahmen (z.B. rel="sponsored" bei Anzeigenmarkierung) siehe nofollow, sponsored & ugc.

[url=http://www.example.com]Ankertext[/url]

Links können über eine Checkbox in einem neuen Fenster geöffnet werden: Der BBCode dazu sieht wie folgt aus:

Embeds / Einbettungen

Social-Media-, Video- & Karten-Embeds

Benutzer:innen haben über Editor-Funktionen (Buttons) die Möglichkeit, externe Videos, Social-Media-Posts und Karten von anderen Plattformen bequem einzubinden. Die Einbindung basiert auf Templates, welche durch PEIQ gepflegt werden.

Es können nur einzelne Beiträge der jeweiligen Plattformen eingebunden werden, nicht jedoch Übersichtsseiten. Zum Einbinden muss die Web-URL bzw. der Einbettungscode verwendet werden.

Für Social-Media-, Video- & Karten-Embeds ist eine Datenschutz-Funktion vorhanden, welche sicherstellen soll, dass keine Übertragung der Daten an die externe Plattform, von welcher der eingebettete Inhalt stammt, ohne Wissen des Seitenbesuchers erfolgt. Details zur Datenschutz-Funktion der Social-Media-, Video- & Karten-Embeds siehe hier.

Mitmachaktion erstellen und einbetten

Eigene Berechtigung erforderlich. Details siehe Aktionen erstellen und Aktionen einbetten.

Code einbetten

Eigene Berechtigung erforderlich. Details siehe Code einbetten.

Bild einbetten

Eigene Berechtigung erforderlich. Ermöglicht es, am Beitrag hochgeladene Bilder im Text des Beitrags/der Veranstaltung einzubetten.

BBCode:

Beitrag, Schnappschuss, Veranstaltung oder Bildergalerie einbetten

Eigene Berechtigung erforderlich. Ermöglicht es, Teaser auf Beiträge, Schnappschüsse, Veranstaltungen oder Bildergalerien im Text des Inhalts einzubetten. Details siehe Teaser für Inhalte über den Editor einbetten.

Manuelle Lesebeschränkung für Premium Inhalte

Hängt an der Berechtigung für die Premium-Content Markierung. Ermöglicht es, die ansonsten vom System automatisch eingespielte Lesebeschränkung manuell zu setzen, um den Anreißertext vor der Paywall für eine optimale Leserconversion aufzubereiten.

Die Lesebeschränkung wird nur in Verbindung mit der Premium-Content-Markierung ausgespielt.
Der Redakteur ist mit manuellem Setzen der Beschränkung selbst für das Einhalten des Best Practice (ca. 800 Zeichen / 200 Wörter) verantwortlich. Unterstützung bietet ein Zeichenzähler für markierte Zeichen am rechten unteren Rand und ein Infotext an der eingebetteten Lesebeschränkung

^{Eingebettete Lesebeschränkung. Der Infotext bietet Tipps für das Einhalten des Best Practice.}