it-swarm.com.de

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!

7
Jane

Ckeditor verwendet die Datei ckeditor.styles.js, 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 Datei ckeditor.styles.js 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 anwendbares CSS.

6
nmc

Anstatt sich in ckeditor.styles.js Einzuhängen, 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)

    (enter image description here

  • Bearbeiten Sie eines der Formate.

    (enter image description here

  • Öffnen Sie das CSS-Feldset .

    (enter image description here

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

Stilname = html_element.class_name

Beispiel dafür ist

Statischer Seitentitel = div.static_page_title (Also der Name des Stils ist Statischer Seitentitel , der bei Anwendung den Text in div umschließt. Hinzufügen von static_page_title als Klasse des div-Elements .)

Schritte zur Verwendung

  • 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. (enter image description here
  • 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

1
Nitesh Sethia