it-swarm.com.de

Wie ändere ich das Dropdown-Menü "Formate" in CKEditor?

Der CKEditor in Drupal 8 verfügt über eine Symbolleistenschaltfläche für Formate mit verschiedenen Textformaten: "Überschrift 1", "Überschrift 2" usw. Wie kann ich Elemente zu dieser Liste hinzufügen und daraus entfernen?

(enter image description here

5
reekris

Ich würde Styles anstelle von Formats verwenden, da die Stile vollständig von Ihnen gesteuert werden und über die Administrationsoberfläche keine Dateien bearbeitet werden müssen.

Wenn Sie es zur Symbolleiste hinzufügen, können Sie es konfigurieren und so viele Elemente hinzufügen, wie Sie möchten.

Hier ist eine Beispielkonfiguration: enter image description here

4
otarza

Sie ändern die Dropdown-Liste "Formate", indem Sie die Liste der zulässigen HTML-Tags ändern. Alle HTML-Tags auf Blockebene werden von CKEditor automatisch in der Dropdown-Liste "Formate" angezeigt.

Ein Tutorial/eine vollständige Erklärung finden Sie unter https://www.drupaleasy.com/quicktips/limiting-block-level-styles-drupal-8-ckeditor .

3
Wim Leers

Sie müssen hook_editor_js_settings_alter () , um [~ # ~] div [~ # ~] wie folgt hinzuzufügen:

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

Ich deaktiviere die Formate und definiere benutzerdefinierte Stile wie in https://drupal.stackexchange.com/a/193528/71941 erläutert. Um eine Live-Vorschau in Ihrem Editor zu erhalten, fügen Sie Ihr Theme-CSS mit dem folgenden Snippet in Ihren Editor ein. In Bezug auf die Benutzerfreundlichkeit scheint dies der beste Ansatz für einen Webmaster zu sein.

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

Nach vielen Stunden der Recherche fand ich endlich die vollständige Lösung für dieses Thema (ich habe die Antwort von rémy, Informationen von dieser Artikel und natürlich ckeditor docs zusammengeführt).

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'
                    ]
                ];
            }
        }
    }
}

Zulässige Attribute, die Sie hier separat für jedes Format festlegen können: http: // localhost: 8081/admin/config/content/formats / (Klicken Sie hier, um die Konfiguration anzuzeigen. Die Liste der Attribute befindet sich unten auf der Seite.) .

Viel Glück!

0
Patryk Godowski