Grundlagen zum Rich-Text-Editor rich-text-editor-essentials

Überblick overview

Mit einem Rich-Text-Editor (RTE) können Sie Text mit Markup eingeben.

Bei Communities-Komponenten wirkt sich dies ähnlich wie Rich-Text-Editor in der Autorenumgebung auf Text aus, der in der Veröffentlichungsumgebung eingegeben wird.

Aktivieren des Rich-Text-Editors enabling-rich-text-editor

Communities-Komponenten, die benutzergenerierte Inhalte (User Generated Content, UGC) zulassen, können für den RTE aktiviert werden. Wenn die Komponente zu einer Seite hinzugefügt oder in eine Funktion eingefügt wurde, kann RTE standardmäßig aktiviert sein oder nicht.

Wenn diese Option nicht aktiviert ist, Sie einfach den„author edit mode“ ein, wählen Sie die Komponente aus, die bearbeitet werden soll, und aktivieren Sie das Kontrollkästchen Rich Text Editor .

RTE ist für die folgenden Communities-Komponenten verfügbar:

Anpassung customization

Der Rich-Text-Editor kann angepasst werden, da die Implementierung auf CKEditor basiert.

Die aktuelle Konfiguration für Communities-Komponenten befindet sich im cq.social. scf clientlib, im Repository unter .

/libs/clientlibs/social/commons/scf/ckrte.js

Das Ändern der Client-Bibliothek „cq.social.scf“ wird nicht empfohlen, da zukünftige Upgrades alle Änderungen überschreiben können.

Beispielanpassung: Inline-Links example-customization-inline-links

Aus Sicherheitsgründen sind die Hyperlink-Optionen nicht in dem Satz von Rich-Text-Symbolen enthalten, der Mitgliedern standardmäßig angezeigt wird. Die Fähigkeit, Unfug zu stiften, ist groß, wenn in benutzergenerierten Inhalten erlaubt sind.

So fügen Sie die Hyperlink-Optionen zur Symbolleiste hinzu:

/libs/clientlibs/social/commons/scf/ckrte.js libs-clientlibs-social-commons-scf-ckrte-js

CKRte.prototype.config = {
    toolbar: [
        { name: "basicstyles",
           items: ["Bold", "Italic", "Underline", "NumberedList", "BulletedList", "Outdent", "Indent", "JustifyLeft", "JustifyCenter", "JustifyRight", "JustifyBlock", "TextColor"]
        },
        { name: 'links',
           items: [ 'Link','Unlink','Anchor' ]
        }
    ],
    autoParagraph: false,
    autoUpdateElement: false,
    removePlugins: "elementspath",
    resize_enabled: false
};