web-dev-qa-db-ja.com

CkEditorスタイルドロップダウンを構成する方法

次のように、basic_htmlルールセットのCKEditorの設定を変更しました。

CK Editor configuration

その後、エディターを使用しようとすると、次の結果が得られます。

Editor as visible on actual page

キャッシュを複数回クリアしてみました。 drush cache-rebuildでキャッシュを再構築してみました。

Drupal 8でCKEditorを構成できるようにするために、他に何かしなければならないことはありますか？

8wysiwyg
5
tanbog

1。カスタムスタイルはCSSファイルに存在する必要があります。 2.フィルターの設定は適切である必要があります。確認するには、スタイルを有効にしてh1.heading-a|Title（css/base/elements.cssから取得）を追加します。たとえば、目的）スタイルドロップダウンで、2番目の画像に示すように表示されました。

enter image description here

2番目の画像

enter image description here

したがって、問題は、Class|KeyをStyles dropdownセクションに適切に配置し、CSSで使用できることを確認することです。

後でカスタムをチェックするために、h2.myclass {color: red}をelements.cssに入れ、キャッシュを保存してクリアしました。ご覧のとおり、次の画像に表示されています

enter image description here

enter image description here

UPDATE-1：フィルター設定

コメントで述べたように、横線と下線のiConが表示されない理由がここにあります。そのためには、フィルター設定を確認する必要があります。次の画像に示すように、基本的なHTML設定ページの下部に表示されるLimit allow HTML tags and correct faulty HTMLリストで遊んだことがありますか。リストから<hr>を削除すると、アイコンは表示されなくなります。チェックしたところ、<hr>フォームリストを削除すると、アイコンも消えます。

enter image description here

そして、フィルターを有効にする設定は次の画像のようになります

enter image description here

7
CodeNext

drupal 8.4の人々の場合：この方法でCKEditor自体にバグがあります。参照 https://www.drupal.org/project/drupal/issues/2911749 =詳細とパッチについて。

考えられる回避策の1つは、ckeditor.jsを> Drupal 8.3.7（バージョン4.6.2である必要があります））のものに置き換えることです。その後、すべてが正常に機能します。

Composer.jsonで、これを「追加」セクションに追加します。リンクのコメント33を参照してください（drupal.orgの@ayalonへのクレジット）：

"patches": {
  "drupal/core": {
    "Downgrade CkEditor until https://www.drupal.org/node/2911749 is fixed": "https://www.drupal.org/files/issues/fix_ckeditor_styles_dropdown-2911749-17.patch"
  }
}
2
Stef Van Looveren

基本的なHTMLテキスト形式を使用しているときに同様の問題があり、p.class|Titleのようなスタイルを追加したかった。違いは、スタイルボタンが無効になっているため、スタイルリストを開くことができなかったことです。

これを修正するには、テキスト形式を編集して、[許可されたHTMLタグを制限する]フィールドに<p class="">を追加しました。

1
0711master

許可されたHTMLタグのclass属性を見逃していないか確認してください。変化する

<a href hreflang> <em>

に

<a class href hreflang> <em>
1
Rupesh Jagtap

私の場合、「スタイルドロップダウン」の下の特定のCSSクラスの行が長すぎるため、機能しませんでした。

これは機能します：

code.c-bolt-code-snippet__code.c-bolt-code-snippet__code--block|Codeblock

しかし、これは機能しません：

code.c-bolt-code-snippet__code.c-bolt-code-snippet__code--block.c-bolt-code-snippet-syntax--light|Codeblock
0
PiotrK