web-dev-qa-db-fra.com

Comment modifier la liste déroulante "Formats" dans CKEditor

Le CKEditor dans Drupal 8 a un bouton de barre d'outils Formats contenant différents formats de texte: "Titre 1", "Titre 2" etc. Comment puis-je ajouter et supprimer des éléments de cette liste?

enter image description here

8wysiwyg
5
reekris

J'utiliserais Styles au lieu de Formats, car les styles sont entièrement contrôlés par vous, depuis l'interface d'administration, pas besoin de modifier les fichiers.

Lorsque vous l'ajoutez à la barre d'outils, vous pouvez le configurer et ajouter autant d'éléments que vous le souhaitez.

Voici un exemple de configuration: enter image description here

4
otarza

Vous modifiez la liste déroulante "Formats" en modifiant la liste des balises HTML autorisées. Toutes les balises HTML au niveau du bloc sont affichées dans la liste déroulante "Formats" de CKEditor automatiquement.

Pour un tutoriel/une explication complète, voir https://www.drupaleasy.com/quicktips/limiting-block-level-styles-drupal-8-ckeditor .

3
Wim Leers

Vous devez hook_editor_js_settings_alter () , pour ajouter [~ # ~] div [~ # ~] , comme ceci:

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

Je désactive les formats et définit des styles personnalisés comme expliqué dans https://drupal.stackexchange.com/a/193528/71941 . Ensuite, pour obtenir un aperçu en direct dans votre éditeur, incluez votre thème CSS dans votre éditeur avec l'extrait ci-dessous. Concernant la convivialité, cela semble la meilleure approche pour un webmaster.

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

Après plusieurs heures de recherches, j'ai finalement trouvé une solution complète pour ce sujet (j'ai fusionné la réponse de rémy, les informations de cet article , et bien sûr 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'
                    ]
                ];
            }
        }
    }
}

Attributs autorisés que vous pouvez définir ici, séparément pour chaque format: http: // localhost: 8081/admin/config/content/formats / (Cliquez pour la configuration - la liste des attributs est en bas de page) .

Bonne chance!

0
Patryk Godowski