web-dev-qa-db-ja.com

CKEditorの[フォーマット]ドロップダウンを変更するには

Drupal 8のCKEditorには、「Heading 1」、「Heading 2」などのさまざまなテキストフォーマットを含むFormatsツールバーボタンがあります。このリストにアイテムを追加および削除するにはどうすればよいですか？

enter image description here

8wysiwyg
5
reekris

Stylesの代わりにFormatsを使用します。これは、スタイルは管理者インターフェースから完全に制御されるため、ファイルを編集する必要がないためです。

ツールバーに追加するときは、構成して、必要な数の要素を追加できます。

これは設定例です： enter image description here

4
otarza

許可されたHTMLタグのリストを変更して、「フォーマット」ドロップダウンを変更します。ブロックレベルのHTMLタグは、CKEditorによって[フォーマット]ドロップダウンに自動的に表示されます。

チュートリアル/完全な説明については、 https://www.drupaleasy.com/quicktips/limited-block-level-styles-drupal-8-ckeditor を参照してください。

3
Wim Leers

次のように[〜＃〜] div [〜＃〜]を追加するには、 hook_editor_js_settings_alter（） を実行する必要があります。

function YOUR_MODULE_editor_js_settings_alter(array &$settings) {
  foreach (array_keys($settings['editor']['formats']) as $text_format_id) {
    if ($settings['editor']['formats'][$text_format_id]['editor'] === 'ckeditor') {
      $settings['editor']['formats'][$text_format_id]['editorSettings']['format_tags'] .= ';div';
    }
  }
}
2
rémy

フォーマットを無効にして、 https://drupal.stackexchange.com/a/193528/71941 で説明されているようにカスタムスタイルを定義します。次に、エディターでライブプレビューを取得するには、以下のスニペットを使用してエディターにテーマCSSを含めます。使いやすさに関しては、これはウェブマスターにとって最善のアプローチのようです。

use Drupal\editor\Entity\Editor;

/**
 * Implements hook_ckeditor_css_alter().
 *
 * Injects our CSS sheets anytime CKEditor has loaded.
 *
 * @param array $css
 * @param Drupal\editor\Entity\Editor $editor
 */
function MY_MODULE_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', 'MY_THEME_NAME') . '/css/main.css';
  }
}
0
Stef Van Looveren

何時間もの調査の後、私はようやくこの主題の完全な解決策を見つけました（レミの答え、 この記事 からの情報、そしてもちろん ckeditor docs をマージしました）。

function MODULENAME_editor_js_settings_alter(array &$settings) {
    foreach (array_keys($settings['editor']['formats']) as $text_format_id) {
        if ($settings['editor']['formats'][$text_format_id]['editor'] === 'ckeditor') {

            //Reference just to code be shorter:
            $ck = &$settings['editor']['formats'][$text_format_id]['editorSettings'];

            //Check if index 'format_tags' exists, it means that format list is active
            if (isset($ck['format_tags'])) {

                //Add my custom format at the end of list of formats, it's possible to add as many formats as you wish. Of course it's possible to remove other formats or change theirs order, by overwrite all variable.

                $ck['format_tags'] .= ';MyCustomFormat';

                // And now is the most important thing to do - setting of added format:
                // Name it's name which will be shown at the list and it's possible to put there anything what you want. 
                // Element is html element - beware that this element should be allowed in back-office!
                // Attributes - it's an array where you can add class and other allowed attributes 
                $ck['format_MyCustomFormat'] = [
                    'name' => 'MyCustomFormat Name',
                    'element' => 'p',
                    'attributes' => [
                        'class' => 'MyCustomFormatClass',
                        'data' => 'SOME DATA',
                        'name' => 'SOME NAME'
                    ]
                ];
            }
        }
    }
}

ここで設定できる、属性ごとに個別に許可される属性： http：// localhost：8081/admin/config/content/formats / （設定のためにクリック-属性のリストはページの下部にあります） 。

幸運を！

0
Patryk Godowski