Empêcher WYSIWYG + CKEditor de supprimer les classes html

9

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 configurer une configuration JS config.allowedContent = truedans 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 au plugin média .

jrharshath
la source
Quelle version de CKEditor avez-vous téléchargée dans votre dossier de bibliothèques?
Beebee
en utilisant la version 4.2
jrharshath

Réponses:

4

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.

Dave Bruns
la source
alors que le patch a échoué pour moi, j'ai codé en dur "allowedContent = true" dans editors/ckeditor.incla wysiwyg_ckeditor_settingsfonction de
jrharshath
Heureux que tu es parvenu à le faire fonctionner. Ce correctif doit être appliqué à la version -dev de wysiwyg, ce qui pourrait être la raison pour laquelle il ne s'applique pas.
Dave Bruns
Le patch contient bien plus que cette seule ligne. Assurez-vous de tester pleinement afin que tout fonctionne en conséquence!
Beebee
10

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 ...

Tommy chez LIW
la source
1
OÙ?!?!!?!? dans quel dossier !!! personne sur Internet n'a UNE FOIS mentionné où ce config.allowedContent doit être défini?
coderama
@coderama dans / admin / config / content / ckeditor, choisissez votre profil à modifier, développez les options avancées et mettez-le dans la configuration JavaScript personnalisée
UnsettlingTrend
2

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.

Trey
la source
0

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, 
  );
Todd Austin
la source
0

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 proviennent 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)',
pic commun
la source
0

Le filtre HTML filtré supprime les classes des éléments qui ne figurent 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 si c'est 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>).

cptstarling
la source
Mais, comment mettre la classe dans l'option autorisée des éléments HTML. Autant que je sache, vous pouvez mettre l'élément HTML dans la liste, c'est-à-dire <div>, <span> etc. Donc, selon ce div et span ne seront pas supprimés, mais comment y mettre la classe, pouvez-vous fournir un exemple?
CodeNext
Il n'est pas nécessaire de mettre une classe là-dedans. Si l'élément HTML est dans la liste, ses classes resteront intactes et ne seront pas supprimées.
cptstarling
Je ne comprends pas pourquoi mon message s'affiche hier, je l'avais demandé il y a plusieurs mois, y a-t-il un problème ???????
CodeNext
Bizarre, car la réponse à laquelle vous avez répondu ne date que d'environ 2 jours :)
cptstarling
Aucun homme, très étrange, je n'ai rien fait pendant des mois là-dessus ... Oh mon dieu, laissez-moi me déconnecter et me reconnecter ....
CodeNext