web-dev-qa-db-fra.com

Comment charger les styles de thème dans CKEditor?

Dans Drupal 8, comment pouvez-vous demander à CKEditor de charger des feuilles de style supplémentaires lorsque vous utilisez un format de filtre configuré? Dans Drupal 7, vous pouvez donner les chemins d'accès du module WYSIWYG à CSS feuilles à charger, ce qui a fait que le texte de l'éditeur reflète autant que possible le thème. Je ne vois pas cette option.

8wysiwyg
8
Kevin

Voici une façon de le faire ... je ne sais pas s'il y en a d'autres (basées sur l'administrateur):

/**
 * 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';
  }
}
9
Kevin

À moins que vous ne souhaitiez charger des styles pour des formats spécifiques, vous pouvez facilement ajouter du CSS dans votre MODULE.info.yml fichier, comme ceci:

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

Utilisation @import instructions dans l'une des feuilles de style pour extraire des feuilles de style externes qui ne font pas partie de votre thème:

/* in css/ckeditor.css */
@import url('//mycdn.com/myfonts.css');
@import url('/path/to/drupal/module/styles.css');
8
Steven

Voici une solution simple pour cela dans Drupal 8, lorsque vous utilisez un thème personnalisé ou un thème d'administration personnalisé.

  1. Ouvrez votre fichier d'informations de thème personnalisé *. Info.yml et ajoutez la ligne au-dessus de libraries ou en dessous base_theme.

    ckeditor_stylesheets:
  - css/ckeditor.css

  2. Créez un fichier ckeditor.css dans le css/ répertoire.

  3. Écrivez votre CSS dans ce fichier et les styles seront appliqués à CKEditor.
1
Someshver Thakur