web-dev-qa-db-ja.com

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

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

8wysiwyg
8
Kevin

ここにそれを行う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';
  }
}
9
Kevin

特定のフォーマットのスタイルをロードしたくない場合は、次のように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');
8
Steven

カスタムテーマまたはカスタム管理テーマを使用している場合のDrupal 8）の簡単な解決策を次に示します。

  1. カスタムテーマ情報ファイル*。info.ymlを開き、librariesの上またはbase_themeの下に行を追加します。

    ckeditor_stylesheets:
  - css/ckeditor.css

  2. css/ディレクトリにファイルckeditor.cssを作成します。

  3. そのファイルにCSSを書き込むと、スタイルがCKEditorに適用されます。
1
Someshver Thakur