Wie lade ich Themenstile in CKEditor?

9

Wie kann CKEditor in Drupal 8 zusätzliche Stylesheets laden, wenn ein konfiguriertes Filterformat verwendet wird? In Drupal 7 können Sie den WYSIWYG-Modulpfaden zum Laden von CSS-Blättern geben, wodurch der Editortext das Thema so gut wie möglich widerspiegelt. Ich sehe diese Option nicht.

8 wysiwyg Kevin
quelle

Antworten:

10

Hier ist eine Möglichkeit, dies zu tun ... Ich bin mir nicht sicher, ob es andere gibt (admin-basiert):

/**
 * Implements hook_ckeditor_css_alter().
 *
 * Injects our CSS sheets anytime CKEditor has loaded.
 *
 * @param array $css
 * @param Drupal\editor\Entity\Editor $editor
 */
function mymodule_ckeditor_css_alter(array &$css, Editor $editor) {
  if (!$editor->hasAssociatedFilterFormat()) {
    return;
  }

  $known_formats = [
    'basic_html',
    'full_html'
  ];

  if (in_array($editor->getFilterFormat()->id(), $known_formats)) {
    $css[] = drupal_get_path('theme', 'mytheme') . '/build/css/style.css';
  }
}
Kevin
quelle
3
Verwenden Sie vor der Funktion Drupal \ editor \ Entity \ Editor. wird gebraucht.
user780
9

Sofern Sie keine Stile für bestimmte Formate laden möchten, können Sie Ihrer MODULE.info.ymlDatei ganz einfach CSS hinzufügen :

ckeditor_stylesheets:
  - css/application.css
  - css/ckeditor.css

Verwenden Sie @importAnweisungen in einem der Stylesheets, um externe Stylesheets abzurufen, die nicht in Ihrem Thema enthalten sind:

/* in css/ckeditor.css */
@import url('//mycdn.com/myfonts.css');
@import url('/path/to/drupal/module/styles.css');
Steven
quelle
2
Ich habe eine Problemumgehung gefunden, um externe Stylesheets mithilfe einer @importAnweisung einzuschließen .
James Wilson
1
Ja, Sie können Standard-CSS-Import verwenden@import url("http://example.com/file.css");
Steven
2

Hier ist eine einfache Lösung für dieses Problem in Drupal 8, wenn Sie ein benutzerdefiniertes Design oder ein benutzerdefiniertes Admin-Design verwenden.

  1. Öffnen Sie Ihre benutzerdefinierte Themeninfodatei * .info.yml und fügen Sie die Zeile oben librariesoder unten hinzu base_theme.

    ckeditor_stylesheets:
  - css/ckeditor.css

  2. Erstellen Sie eine Datei ckeditor.css im css/Verzeichnis.

  3. Schreiben Sie Ihr CSS in diese Datei und die Stile werden auf CKEditor angewendet.
Etwas Thakur
quelle