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.

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.

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.
Derzeit unterstützen IPS nur Plugins, die eine Schaltfläche in die Editor-Symbolleiste hinzufügen. Bitte installiere keine Plugins, die andere Arten von Funktionalität hinzufügen, da es 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. 
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.

Wenn es kein passendes CKEditor-Plugin gibt, das Du brauchst, dann gibt es ist eine Alternative, eine benutzerdefinierte Schaltfläche zu erstellen.
Was benutzerdefinierte Schaltflächen können?
Mit benutzerdefinierten Schaltflächen kannst Du HTML-Schnipsel erstellen, die durch Anklicken einer Schaltfläche in der Symbolleiste des Editors in den Text eingefügt werden. Die so erstellten Inhalte werden einheitlich formatiert. Vorteile von benutzerdefinierte Schaltflächen gegenüber eine manuelle Formatierung im Editor:
Du kannst CSS Klassen verwenden und diese abhängig vom eingestellten Theme unterschiedlich gestalten Du kannst CSS Klassen jederzeit ändern und so wird das Aussehen in ALLEN Artikel, die diese verwendet auf einmal geändert. Keine manuelle Formatierung Artikel per Artikel ist nötig. Du kannst auch Typographie von IPS nutzen, um die Bereiche zu formatieren. Einschränkung: benutzerdefinierte Schaltflächen sind keine vollständige CKEditor-Plugins. Sie können beispielsweise nicht dynamisch sein oder Javascript verwenden. Aber für die Formatierung von Texten, ist eine benutzerdefinierte Schaltfläche die beste Wahl.
Obwohl benutzerdefinierte Schaltflächen in der Regel einfach sind, werden HTML-Kenntnisse dafür benötigt oder Du versuchst Dir Hilfe im Forum zu holen. Einmal erstellt, brauchst Du Dich nicht mehr um HTML zu kümmern. Ein benutzerdefinierte Schaltfläche erstellen
Um eine benutzerdefinierte Schaltfläche zu erstellen, gehst 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 in erster Linie für Farben oder Schriftgröße einzelner Wörter innerhalb eines Textes verwendet Einzeiliger Block - wird für ganze Absätze (z.B. Überschriften oder Zitate) verwendet, hierzu wird immer eine separate Zeile für den formatierten Inhalt erstellt. Block - wird für ganze HTML Blöcke mit mehreren Zeilen verwendet,  hierzu wird der Block ebenfalls immer in einer neue Zeile gesetzt und der Inhalt in p-Tag gesetzt. Wert verwenden?
Eine benutzerdefinierte Schaltfläche kann optional einen Wert vom Benutzer akzeptieren (unabhängig vom tatsächlichen Inhalt). Diese Option erscheint als Popup-Dialog, wenn der Benutzer auf die Schaltfläche im Editor klickt, und der vom Benutzer eingegebene Wert wird in den Block an die Stelle, die mit {option} markiert ist, übernommen. Wenn dieses Feld aktiviert ist, siehst Du eine zusätzliche Einstellung: Label für Option
Der Text, der im Pop-Up angezeigt wird nach dem auf die Schaltfläche geklickt wurde. HTML
Das eigentliche HTML, das die Schaltfläche bei der Verwendung im Editor hinzufügt. Im Allgemeinen wird beliebiges HTML unterstützt, aber es muss valide sein. Innerhalb von 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 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
Nutze kein Inline-CSS in Deinem HTML, da es unmöglich sein wird, diese später schnell zu aktualisieren (die Beiträge werden mit den Formatierungen gespeichert, wenn Du also HTML in eine benutzerdefinierte Schaltfläche später änderst, werden alte Beiträge diese Änderungen nicht wiedergeben).
Verwende stattdessen CSS-Klassennamen, die Du in custom.css für jedes Theme individuell formatieren kannst. Auf diese Weise kannst Du die Formatierung später aktualisieren, und auch alle alte Beiträge werden ebenfalls Deine Änderungen übernehmen.
Ein Beispiel ohne eigene CSS Klassen
IPS hat bereits mehrere Formatierungen, die innerhalb von Community einheitlich verwendet werden, z. B. so genannte Message Boxen. Lass uns eine Schaltfläche erstellen, die mit einem Klick den Text in einer Info-Box verwandelt:
Das ist Standardformatierung für die Infoboxen, die von IPS überall in der Community verwendet werden. Gehe zu Anpassung -> Editor -> Symbolleisten und klicke auf Schaltfläche hinzufügen in der Kopfzeile und dann auf die Registerkarte Benutzerdefiniert. Fülle die Felder wie folgt aus:

Benutzerdefinierte Schaltfläche für CKEditor
Im Feld Symbol habe ich einen Icon hinzugefügt, den ich von dieser Seite geladen habe. Du kannst es für diesen Beispiel verwenden  oder natürlich jedes andere Icon nutzen, das Dir besser zusagt. 
Im Feld HTML füge folgendes HTML hinzu:
<div class="ipsMessage ipsMessage_info"> {content} </div> Speichere die Schaltfläche, Du findest sie jetzt in der Symbolleiste unter dem Editor im Bereich "Schaltflächen nicht im Editor". Ziehe die Schaltfläche in Deine Symbolleiste in Editor.  Mit Klick darauf kannst Du bestimmen, wer und wo die Schaltfläche nutzen darf.
Jetzt wechsele in Frontend und teste den Button. Sollte sich die Formatierung von IPS für infoMessage irgendwann verändern, wird es automatisch in allen Bereichen angewandt. Auch in Deinen Artikel oder anderen Beiträgen, wo Du es genutzt hast.

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.