CKEditorにテーマスタイルをロードする方法

9

Drupal 8では、構成されたフィルター形式を使用しているときに、CKEditorで追加のスタイルシートをどのようにロードできますか？Drupal 7では、ロードするCSSシートへのWYSIWYGモジュールパスを指定できます。これにより、エディターのテキストにテーマをできるだけ反映させることができます。このオプションは表示されません。

8 wysiwyg

— ケビン
ソース

10

これを行う1つの方法を次に示します...他にあるかどうか（管理者ベース）：

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

— ケビン
ソース

3

関数の前に、Drupal \ editor \ Entity \ Editorを使用します。必要です。

— user780

9

特定のフォーマットのスタイルをロードしたくない場合はMODULE.info.yml、次のようにファイル内にCSSを簡単に追加できます。

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

@importいずれかのスタイルシート内のステートメントを使用して、テーマにない外部スタイルシートを取得します。

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

— スティーブン
ソース

2

@importステートメントを使用して外部スタイルシートを含める回避策を発見しました。

— JamesWilson、2018年

1

はい、標準のCSSインポートを使用できます@import url("http://example.com/file.css");

— Steven

2

カスタムテーマまたはカスタム管理テーマを使用している場合の、Drupal 8での簡単なソリューションを次に示します。

カスタムテーマ情報ファイル* .info.ymlを開き、上librariesまたは下に行を追加しますbase_theme。
```
ckeditor_stylesheets:
  - css/ckeditor.css
```
ファイルの作成ckeditor.cssでcss/ディレクトリを。
そのファイルにCSSを書き込むと、スタイルがCKEditorに適用されます。

— サメシュバータクル
ソース