Zum Inhalt springen

Documentation für Invision Community

  1. Einführung in den IPS4-Editor

    Die IPS Community Suite verwendet einen "What you see is what you get" (WYSIWYG) Editor, der formatierte und strukturierte Inhalte in allen Forenbeiträgen, Artikeln, Benutzerkommentaren und so weiter, ermöglicht. Die Inhalte werden visuell verfasst - es besteht also keine Notwendigkeit mehr, spezielles Wissen wie z. B. BBCode zu verwenden. 
    Der von IPS verwendete Editor ist eine erweiterte Version von CKEditor, dem führenden WYSIWYG-HTML-Editor. Mit ihm hast Du Zugang zu der großen Auswahl an Plugins und Design und Du kannst sie einfach installieren, um sofort in Deine Community zu verwenden. In den späteren Schritten erfährst Du, wie Du es machen kannst.
  2. Anpassen der Editor-Symbolleisten

    Die Symbolleisten des IPS4-Editors sind vollständig anpassbar. Du kannst die Schaltflächen (Buttons) neu anordnen oder ganz entfernen und Berechtigungen festlegen, welche Benutzergruppe welche Buttons verwenden darf. Um die Editor-Symbolleisten zu verwalten, navigierst Du im AdminCP zu Anpassung -> Editor -> Symbolleisten. Auf dem Bildschirm siehst Du einen Dummy-Editor, der Deine aktuelle Symbolleisten-Konfiguration für die Desktop-Ansicht anzeigt. 
    Responsives Design
    IPS verfügt über ein responsives Design, d. h. dasselbe Design funktioniert auf Desktops, Tablets und Mobiltelefonen und passt die Anzeige abhängig vom verfügbaren Platz an. Auf einem Desktop-Monitor kann man natürlich die gesamte Palette der Bearbeitungsoptionen anzeigen, während man auf dem Mobiltelefon nur die wichtigsten Formatierungsoptionen zeigt. IPS erleichtert die Konfiguration, indem es drei Editor-Konfigurationen anbietet, die Du unabhängig voneinander ändern kannst. Dabei stellt IPS sicher, dass die entsprechenden Symbole je nach Gerät angezeigt oder versteckt werden. Mit den Registerkarten über dem Dummy-Editor kannst Du also diese Größen konfigurieren:
    Groß = Desktop Medium = Tablett Klein = Mobiltelefon Schaltflächen des Editors neu anordnen
    In ACP siehst einen Dummy-Editor, der Dir deine aktuelle Symbolleisten-Konfiguration anzeigt. Unten auf der Seite befindet sich eine weitere Symbolleiste, die die verfügbaren Schaltflächen enthält, die derzeit nicht verwendet werden. Ziehe die Schaltflächen zwischen diesen beiden Stellen, um sie zu Deinen Symbolleisten hinzuzufügen oder zu entfernen. Die von Dir vorgenommenen Änderungen stehen den Benutzern sofort zur Verfügung.
    Ändern von Schaltflächenberechtigungen
    Um Bereiche einzuschränken, in denen eine Schaltfläche verfügbar ist oder für wen sie verfügbar sein sollte, klicke auf die zu bearbeitende Schaltfläche in der Symbolleiste. Du siehst dann eine einfache Form:
    564b330a4067f_Bold2015-11-1709-00-12.thu
    Standardmäßig stehen Schaltflächen für Jeder und Überall zur Verfügung, aber durch Umschalten der Kontrollkästchen und Auswahl von Benutzergruppen oder Bereichen kannst Du es hier ändern.
    Hinweis Einige Schaltflächen, wie z.B. fett, kursiv und unterstrichen, haben BBCode-Äquivalente im alten Stil. Das Entfernen der Schaltflächen aus der Symbolleiste verhindert nicht, dass diese BBCodes im Inhalt verwendet werden können.
    Hinzufügen von Symbolleisten und Trennzeichen
    Du kannst auch neue Symbolleisten hinzufügen, wenn die einzelne Symbolleiste nicht genug Platz bietet, und neue Trennlinien, wenn Du die Schaltflächen nach Typ gruppiert halten möchtest. Klicke einfach auf Symbolleisten hinzufügen über dem Dummy-Editor, um sie hinzuzufügen. Trennlinien können wie Schaltflächen gezogen und fallen gelassen werden, sobald Du sie hinzugefügt hast.
    Änderungen an Ihrem Editor rückgängig machen
    Wenn Du zu der Konfiguration zurückkehren möchten, die IPS bei der Installation der Software zur Verfügung stellt, klicke auf Standardkonfiguration wiederherstellen oben auf der Seite. Dadurch werden alle Positionierungen und Berechtigungen für alle Editorgrößen zurückgesetzt, nicht nur für diejenige, die Du gerade anzeigst.
  3. Hinzufügen von Editor-Schaltflächen mit Plugins

    Da der Editor in IPS den CKEditor verwendet, steht Dir eine Vielzahl an Plugins zur Verfügung. Wenn Du zusätzliche Editor-Funktion benötigst, schaue in der Plugin-Repository nach, ob es ein fertiges Plugin dafür gibt.
    Hinweis Derzeit unterstützen IPS nur Plugins, die eine Schaltfläche zur CKEditor-Symbolleiste hinzufügen. Bitte installiere keine Plugins, die andere Arten von Funktionalität hinzufügen, da dies zu Problemen führen könnte.
    Installieren eines CKEditor-Plugins
    Navigiere zu Beginn in AdminCP zu Anpassung -> Editor -> Symbolleisten. Klicke auf die Schaltfläche hinzufügen und wähle auf dem nächsten Bildschirm die Registerkarte CKEditor Plugin. 
    Hinweis Das von Dir installierte Plugin muss mit der in Deiner Version der IPS Community Suite verwendeten CKEditor-Version kompatibel sein. Die aktuelle Version des Editors wird direkt unter dem Upload-Button angezeigt, damit Du die Kompatibilität des Plugins auf der CKEditor-Website überprüfen kannst.
    Wähle hier die Plugin-Zip-Datei, die du heruntergeladen hast, und speicher das Formular ab. Wenn Plugin erfolgreich installiert wurde, siehst Du die neue Schaltfläche in der Symbolleiste "Schaltflächen nicht im Editor" unter dem Dummy-Editor. Du kannst sie nun auf die aktive Symbolleisten ziehen und wie gewohnt verwalten.
    Wenn die Plugin-Installation fehlschlägt
    Gelegentlich wird die Installation eines CKEditor-Plugins nicht funktionieren. Dafür kann es verschiedene Gründe geben:
    Der Plugin fügt keine Schaltfläche zu dem Editor. Derzeit werden nur Editor-Plugin unterstützt, die eine Schaltfläche zur Symbolleiste hinzufügen; andere Arten von Plugins werden nicht unterstützt. Die installierte Version von CKEditor wird nicht unterstützt. Überprüfe, dass das Plugin, das Du verwenden willst, die Version von CKEditor unterstützt, die in der von Dir installierten Version der IPS Community Suite verwendet wird. Es muss passen! Dein CKEditor-Verzeichnis hat keine Schreibrechte. Das Verzeichnis /applications/core/interface/ckeditor/ckeditor/plugins muss beschreibbar sein (CHMOD 777), um Plugins installieren zu können. Die Rechte können über FTP-Programm angepasst werden.
  4. Hinzufügen von benutzerdefinierten Editor-Schaltflächen

    Wenn es kein passendes CKEditor-Plugin gibt, das Du brauchst, dann gibt es ist eine Alternative, eine benutzerdefinierte Schaltfläche zu erstellen.
    Was können benutzerdefinierte Schaltflächen tun?
    Mit benutzerdefinierten Schaltflächen kannst Du HTML-Blöcke erstellen, die durch Anklicken einer Schaltfläche in der Symbolleiste des Editors in den Text eingefügt werden. Die von Dir erstellten Blöcke können so Inhalte einheitlich formatieren, die von den Benutzern eingegeben werden können.
    Benutzerdefinierte Schaltflächen haben nicht die Fähigkeiten eines vollständigen CKEditor-Plugins - sie können beispielsweise nicht dynamisch sein oder Javascript verwenden. Aber für die Formatierung von Text, den der Benutzer eingibt, kann eine benutzerdefinierte Schaltfläche die beste Wahl sein.
    Tipp Hinweis: Obwohl benutzerdefinierte Schaltflächen in der Regel einfach sind, werden HTML-Kenntnisse dafür benötigt oder du versuchst Hilfe im Forum zu holen. Erstellen einer benutzerdefinierten Schaltfläche
    Um eine benutzerdefinierte Schaltfläche zu erstellen, navigierst Du zu Anpassung -> Editor -> Symbolleisten. Klicke auf Schaltfläche hinzufügen in der Kopfzeile und dann auf die Registerkarte Benutzerdefiniert. Das angezeigte Formular hat folgenden Felder:
    Bezeichnung
    Der Bezeichnung, die die Benutzer sehen, wenn sie mit der Maus über die Schaltfläche im Editor fahren. Symbol
    Eine kleine Bilddatei, die als Schaltflächensymbol im Editor angezeigt wird. Lade hier eine Datei hoch, das doppelt so groß ist, wie Du es gerne hättest; es wird dann vom Browser verkleinert und in hoher Auflösung angezeigt. Art
    Es werden drei Arten unterstützt, die den drei Arten der Elementanzeige in HTML grob entsprechen: Inline - wird verwendet, wenn das eingefügte HTML irgendwo in einer Textzeile vorhanden ist. Es wird keine neue Zeile für den Inhalt erstellt. Single Line Block - für einzelne Zeilen (z.B. Überschriften), für den Block wird eine neue Zeile erstellt. Block - wird für mehrere Zeilen verwendet und setzt den Block ebenfalls auf eine neue Zeile. Wert verwenden?
    Eine benutzerdefinierte Schaltfläche kann optional einen Wert vom Benutzer akzeptieren (abgesehen von dem, was er wie üblich innerhalb des Blocks selbst eingeben kann). Diese Option erscheint als Popup-Dialog, wenn der Benutzer auf die Schaltfläche im Editor klickt, und der vom Benutzer eingegebene Wert wird beim Anzeigen in den Block übernommen. Wenn dieses Feld aktiviert ist, siehst Du eine zusätzliche Einstellung: Bezeichnung des Wertes
    Der Text, der dem Benutzer angezeigt wird, der auf die Schaltfläche geklickt hat. HTML
    Das eigentliche HTML, das die Schaltfläche bei der Verwendung im Editor darstellt. Im Allgemeinen wird jedes HTML unterstützt, aber es muss gültig sein. Innerhalb dieses HTML können ein paar spezielle Tags verwendet werden: {option}
    Wenn ein Wert verwendet wird, wird dieser Tag durch den vom Benutzer eingegebenen Wert ersetzt, so wie er ist. {content}
    Wenn die Schaltfläche es dem Benutzer erlaubt, innerhalb des generierten HTML zu tippen, fügst Du diesen Tag dort ein, wo der Benutzer tippen können soll. Klicke auf Speichern, um die Schaltfläche zu erstellen. Das Symbol für die Schaltfläche wird in der Symbolleiste "Schaltflächen nicht im Editor" angezeigt, und von hier aus kannst Du es in Deine Symbolleiste ziehen und wie gewohnt konfigurieren.
    Verwendung benutzerdefinierter Stile
    Nutzer keine Inline-Stile in Deinem HTML, da es ast unmöglich sein wird, diese später schnell zu aktualisieren (die Beiträge werden mit den Formatierungen gespeichert, wenn Du also eine benutzerdefinierte Schaltfläche später änderst, werden alte Beiträge diese Änderungen nicht wiedergeben).
    Verwende stattdessen die Klassennamen und das Hinzufügen von Stilen für diese Klassennamen in custom.css. Auf diese Weise kannst Du die Stile später aktualisieren, und alte Beiträge werden ebenfalls die Änderungen widerspiegeln.
    Ein Beispiel
    Innerhalb dieser Dokumentation werden solche Tipp-Boxen verwendet:
    Tipp Dies ist ein Tipp
    Diese Formatierung wird mit einem Klick auf die benutzerdefinierte Editor-Schaltfläche im Editor erstellt. Hier ist die Konfiguration, die zur Erstellung dieser Schaltfläche benötigt wird:
    Bezeichung
    Tipp Symbol
    Typ
    Block Wert verwenden
    Nein HTML <div class='docsBox docsBox_tip'>   <div class='docsBox_header'>Tipp</div>   <div class='docsBox_body'>     <div class='ipsType_richText ipsType_break ipsContained'>         {Inhalt}     </div>   </div> </div>  
    Die Stile für die Box fügen wir dann in unserer CSS-Datei custom.css hinzu:
    .docsBox_header { padding: 5px 10px; color: #fff; font-weight: 500; font-size: 15px; } .docsBox_body { padding: 10px; font-size: 13px; line-height: 1.4; } .docsBox_tip .docsBox_header { background: #2E7D32; } .docsBox_tip .docsBox_body { background: #E8F5E9; } .docsBox_tip .docsBox_body .ipsType_richText { color: #1B5E20; }  
  5. Anpassen der Editor-Einstellungen

    Es stehen Dir (als Administrator) einige globale Editor-Einstellungen zur Verfügung, die Du für Deine Community konfigurieren kannst. Um sie zu bearbeiten, navigierst Du im AdminCP zu Anpassung -> Editor -> Einstellungen.
    Allgemeine Einstellungen
    Verhalten beim Einfügen
    Standardmäßig erscheint ab IPS 4.1 beim Einfügen von formatierten Inhalten (d. h. von anderswo kopierten Inhalten, die HTML-Formatierungen wie Fett, Kursiv usw. enthalten) im Editor eine Leiste, in der der Benutzer gefragt wird, ob er diese Formatierung beibehalten oder entfernen und den reinen Text beibehalten möchte:
    564b5bf3906ad_NeueTopic-InvisionPow_anlegen
    Einige Administratoren ziehen es vor, dass kein formatierter Inhalt veröffentlicht wird, und die Einstellung dieses Verhalten ermöglicht es Ihnen, dies zu kontrollieren.
    Verhalten der Eingabetaste
    Wenn der Benutzer die Eingabetaste drückt, wird standardmäßig ein neuer Absatz begonnen (und zwischen der neuen Zeile und der Zeile darüber ist ein Leerzeichen), wie es bei vielen modernen Webanwendungen der Fall ist. Einige Administratoren ziehen es jedoch vor, dass beim Drücken der Eingabetaste ein einfacher Zeilenumbruch erfolgt und der gleiche Absatz fortgesetzt wird (so hat IPB3 auch die Eingabetaste behandelt). Mit der Einstellung des Verhaltens der Eingabetaste kannst Du es steuern.
    Erweiterte Einstellungen
    Wenn ein Beitrag gespeichert wird, entfernt der Post-Parser bestimmte HTML-Tags, Attribute und Werte, die aus Sicherheits- oder visuellen Gründen möglicherweise unerwünscht sind. In einigen Fällen möchtest Du dieses Verhalten jedoch möglicherweise ändern und bestimmte Werte durchlassen. Die Registerkarte Erweitert ermöglicht das Hinzufügen von Ausnahmen für:
    CSS-Klassennamen
    Standardmäßig werden außer bestimmten "bekannten" CSS-Klassennamen, die IPS4 z. B. für Zitate benötigt, Klassennamen in Elementen entfernt. Wenn Sie bestimmte Klassennamen für Editor-Plugins oder Schaltflächen beibehalten werden müssen, kannst Du sie hier hinzufügen. Javascript-Steuerungen
    Das Javascript-Framework von IPS4 ermöglicht die Definition von Controllern auf Elementen mit dem Attribut data-controller. Diese werden beim Speichern jedoch aus Sicherheitsgründen entfernt. Wenn Du einen Block hast, der einen Javascript-Controller erfordert, kannst Du hier eine Ausnahme hinzufügen, um dies zu erlauben. Erlaubte Iframe URLs
    Standardmäßig werden iframes in der Regel von den Beiträgen entfernt. Wenn Du sie jedoch zulassen möchtest, kannst Du hier URLs hinzufügen, die auf diese Art und Weise eingebunden werden dürfen. Wenn die URL eines iframes mit einer der aufgelisteten übereinstimmt, wird sie durch den Parser zugelassen.  
    Hinweis Es versteht sich fast von selbst, dass Sie vorsichtig sein sollten, wofür Sie Ausnahmen auf der Registerkarte Erweitert hinzufügen. Das Zulassen unerwünschter Werte durch den Post-Parser könnte zu visuellen Anomalien oder noch schlimmeren Sicherheitsproblemen führen.
  • Diese Dokumentation befindet sich derzeit im Aufbau. 

×
×
  • Neu erstellen...

Wichtige Information

Um unsere Webseite für Sie optimal zu gestalten und fortlaufend verbessern zu können, verwenden wir Cookies. Durch die weitere Nutzung der Webseite stimmen Sie der Verwendung von Cookies zu. Weitere Informationen zu Cookies erhalten Sie in unserer Datenschutzerklärung.