Hinzufügen von CSS-Klassen zu wysiwyg

Ich verwende wysiwyg mit ckeditor und habe mich gefragt, wie ich CSS-Stile hinzufügen würde, damit ein Benutzer beispielsweise Bilder nach links schweben oder andere ähnliche Änderungen vornehmen kann ...?

Vielen Dank!

Ckeditor verwendet die ckeditor.styles.jsDatei, um die verfügbaren Stile in der Dropdown- Liste Stile zu definieren. Die Dokumentation in dieser Datei lautet:

'Styles' button is not enabled by default in DrupalFull and DrupalFiltered toolbars.

Wenn Sie sich die Datei ansehen, sollte es ziemlich einfach sein, sie anhand der angegebenen Beispiele zu ändern.

Die ckeditor.styles.jsDatei kann in ein Verzeichnis kopiert werden, auf das Drupal zugreifen kann, und so geändert werden, dass sie Ihre Stile enthält. Anschließend müssen Sie Ihr CKeditor-Profil so konfigurieren, dass es auf die neue Datei verweist, einschließlich aller anwendbaren CSS.

Anstatt sich einzumischen ckeditor.styles.js, können wir dies direkt auf der Konfigurationsseite des Formats tun.

Das WYSIWYG-Format bietet Ihnen eine Option für Ihre eigenen Stile, und wir können CSS einfach auf der Grundlage dieser Formate schreiben.

Schritte zum Hinzufügen von Stilen

• Melden Sie sich auf der Website als Administrator an.

• Navigieren Sie zur Konfigurationsseite der Formate. (Konfiguration »Inhaltserstellung» Wysiwyg-Profile)

  

• Bearbeiten Sie eines der Formate.

  

• Öffnen Sie das CSS-Feldset .

  

• Unter CSS - Klassen Textbereich , erstellen Sie den Stil , den Sie erstellen möchten. Das Format sollte sein

Style Name = html_element.class_name

Beispiel dafür ist

Statischer Seitentitel = div.static_page_title (Der Name des Stils lautet also Statischer Seitentitel. Wenn er angewendet wird, wird der Text in div eingeschlossen und statischer_Seitentitel als Klasse des div-Elements hinzugefügt .)

Schritte, um es zu verwenden

• Versuchen Sie, einen Inhalt zu erstellen, und verwenden Sie das Format, in dem Sie den Stil hinzugefügt haben.
• Unter Stile sehen Sie die von Ihnen erstellten Stileinstellungen.

• Schreiben Sie einfach den Test und wählen Sie den Stil. Danach würde das Markup ungefähr so ​​aussehen

  <div class="static_page_title">Testing</div>

• Wir können also einfach das CSS für die Klasse static_page_title schreiben und alles würde wie erwartet funktionieren.

Hoffe, dass die Antwort von mir hilfreich wäre