web-dev-qa-db-fra.com

Empêcher WYSIWYG + CKEditor de supprimer les classes html

J'utilise l'éditeur WYSIWYG avec CKEditor. Je constate que lors de l'ajout de classes personnalisées à mes éléments à partir de la vue "source", CKEditor supprime ces classes lors de la sortie de la vue source.

Lors de la recherche d'une solution à ce problème sur Google, j'ai trouvé la page du module CKEditor qui décrit comment résoudre ce problème lors de l'utilisation de CKEditor seul. (Fondamentalement, nous devons mettre en place une configuration JS config.allowedContent = true dans ses paramètres Advanced Content Filter).

Cependant, lorsque vous utilisez CKEditor via WYSIWYG, ces paramètres ne sont pas exposés dans l'interface d'administration. Comment obtenez-vous la même chose lorsque vous utilisez CKEditor via WYSIWYG?

PS: je ne peux pas utiliser CKEditor seul car il ne s'intègre pas avec le plugin média .

7wysiwyg
9
jrharshath

Quelle version de CKEditor utilisez-vous? Il y a un problème avec CKEditor 4.1+, qui a une fonctionnalité appelée Automatic Content Filter (ACF) qui supprimera automatiquement les attributs non définis pour l'éditeur: https://drupal.org/node/1956778

Le patch # 37 du problème a fonctionné pour moi.

4
Dave Bruns

J'ai trouvé une solution.

Cela désactive le filtrage, cela fonctionne, mais ce n'est pas une bonne idée ...

config.allowedContent = true;

Jouer avec une chaîne de contenu fonctionne bien pour id, etc., mais pas pour les attributs de classe et de style, car vous avez () et {} pour le filtrage de classe et de style.

Donc, mon pari est d'autoriser n'importe quelle classe dans l'éditeur:

config.extraAllowedContent = '*(*)';

Cela permet à n'importe quelle classe et tout style en ligne.

config.extraAllowedContent = '*(*);*{*}';

Pour autoriser uniquement class = "asdf1" et class = "asdf2" pour n'importe quelle balise:

config.extraAllowedContent = '*(asdf1,asdf2)';

(vous devez donc spécifier les noms de classe)

Pour autoriser uniquement class = "asdf" uniquement pour la balise p:

config.extraAllowedContent = 'p(asdf)';

Pour autoriser l'attribut id pour n'importe quelle balise:

config.extraAllowedContent = '*[id]';

etc

Pour autoriser la balise de style (<style type = "text/css"> ... </style>):

config.extraAllowedContent = 'style';

Pour être un peu plus complexe:

config.extraAllowedContent = 'span;ul;li;table;td;style;*[id];*(*);*{*}';

J'espère que c'est une meilleure solution ...

10
Tommy at LIW

Cela semble être quelque chose qui devrait être ajouté au module WYSIWYG, la possibilité d'ajouter des paramètres personnalisés aux éditeurs est une exigence assez répandue. Mais en l'absence de cela, je recommande toujours de ne pas éditer le module lui-même car cela casserait lors des mises à niveau ... heureusement, le module fournit un appel à drupal_alter, donc dans un module personnalisé:

function mymodule_wysiwyg_editor_settings_alter(&$settings, $context){
    //check if the editor is ckeditor and the version is at least 4.0
    if($context['profile']->editor=='ckeditor' && $context['editor']['installed version'][0]>3){
        //add custom settings for ckeditor 4.+ here
        $settings['allowedContent'] = TRUE;
    }
}

où "mymodule" est évidemment le nom de votre module personnalisé. Cela accomplit la tâche sans éditer le module de quelqu'un d'autre.

2
Trey

Essayez d'ajouter ce qui suit à modules/wysiwyg/editors/ckeditor.inc

'allowedContent' => TRUE, À function wysiwyg_ckeditor_settings($editor, $config, $theme)

de sorte qu'il se lit maintenant:

function wysiwyg_ckeditor_settings($editor, $config, $theme) {
  $settings = array(
    'width' => 'auto',
    // For better compatibility with smaller textareas.
    'resize_minWidth' => 450,
    'height' => 420,
    // @todo Do not use skins as themes and add separate skin handling.
    'theme' => 'default',
    'skin' => !empty($theme) ? $theme : 'kama',
    // By default, CKEditor converts most characters into HTML entities. Since
    // it does not support a custom definition, but Drupal supports Unicode, we
    // disable at least the additional character sets. CKEditor always converts
    // XML default characters '&', '<', '>'.
    // @todo Check whether completely disabling ProcessHTMLEntities is an option.
    // ADDED  'allowedContent' => TRUE, to keep WYSIWYG from removing classes
    'entities_latin' => FALSE,
    'entities_greek' => FALSE,
    'allowedContent' => TRUE, 
  );
0
Todd Austin

Sans pirater aucune source, et sans essayer de comprendre OERE le bip de ces paramètres est lu, vous pouvez l'ajouter à votre propre module personnalisé

function mymodule_wysiwyg_editor_settings_alter(&$settings, $context) {
    if ($context['profile']->editor == 'ckeditor') {
        $settings['extraAllowedContent'] = array(
            'a[download,type,length,href]',
            'span;ul;li;table;tr;td;style;*[id];*(*);*{*}'
        );
    }
}

Les paramètres demandés par l'OP sont *(*);*{*} de la réponse de @Tommy ci-dessus. Cela semble autoriser les attributs de classe et de style sur n'importe quel élément. Les autres ne sont que des exemples d'entrées. Comme autre exemple, cette entrée autorise les balises nécessaires au module média.

'img[title,alt,src,data-cke-saved-src](wysiwyg-break,drupal-content);video[width,height,controls,src](*);source[src,type];audio[controls,src](*);img[*](media-element,file-default)',
0
commonpike

Le filtre HTML filtré supprime les classes des éléments qui ne sont pas dans ses éléments HTML autorisés. La balise de paragraphe (<p>) n'est pas là par défaut (ce qui peut être déroutant et non naturel), même s'il s'agit de l'élément le plus fréquent où la classe est appliquée. Une fois que vous l'avez mis dedans, le HTML filtré ne supprimera plus les classes de ces balises. Il en va de même pour les balises d'image (<img>).

0
cptstarling