CKEditor supprime automatiquement les classes de div


140

J'utilise CKEditor comme éditeur principal sur mon site Web. Cela me pousse à faire le tour du virage car il semble vouloir changer le code comme il l'entend chaque fois que j'appuie sur le bouton source. Par exemple, si je frappe la source et crée un <div>...

<div class="myclass">some content</div>

Il supprime alors sans raison apparente la classe du <div>, donc quand je frappe à nouveau la source, elle a été changée en ...

<div>some content</div>

Je suppose que ce comportement irritant peut être désactivé dans le config.js, mais j'ai creusé et je ne trouve rien dans la documentation pour l'éteindre.


8
J'ai trouvé la solution après beaucoup de recherches, si vous allez dans config.js et définissez CKEDITOR.config.allowedContent = true; cela arrête alors l'éditeur de jouer avec les choses.
Iain Simpson

Réponses:


284

Désactiver le filtrage de contenu

La solution la plus simple consiste à accéder au fichier config.js et à définir:

config.allowedContent = true;

( N'oubliez pas de vider le cache du navigateur ). Ensuite, CKEditor arrête du tout de filtrer le contenu entré. Cependant, cela désactivera totalement le filtrage de contenu qui est l'une des fonctionnalités les plus importantes de CKEditor.

Configuration du filtrage de contenu

Vous pouvez également configurer le filtre de contenu de CKEditor plus précisément pour n'autoriser que ces éléments, classes, styles et attributs dont vous avez besoin. Cette solution est bien meilleure, car CKEditor supprimera toujours beaucoup de HTML merdique que les navigateurs produisent lors de la copie et du collage de contenu, mais il ne supprimera pas le contenu souhaité.

Par exemple, vous pouvez étendre la configuration par défaut de CKEditor pour accepter toutes les classes div:

config.extraAllowedContent = 'div(*)';

Ou des trucs Bootstrap:

config.extraAllowedContent = 'div(col-md-*,container-fluid,row)';

Ou vous pouvez autoriser les listes de description avec des dirattributs facultatifs pour dtet des ddéléments:

config.extraAllowedContent = 'dl; dt dd[dir]';

Ce n'étaient que des exemples très basiques. Vous pouvez écrire toutes sortes de règles - nécessitant des attributs, des classes ou des styles, correspondant uniquement à des éléments spéciaux, correspondant à tous les éléments. Vous pouvez également interdire des choses et redéfinir totalement les règles de CKEditor. En savoir plus sur:


3
Cela désactivera la fonction. Mieux vaut configurer que désactiver.
oleq

1
@lain Simpson: Vous devez toujours définir cette question comme une réponse. Merci btw pour trouver la solution: D
Jacob van Lingen

1
Parfois, cette solution fonctionne, parfois non. L'attribut style est supprimé, mais parfois, le reste reste.
machineaddict

2
Je travaille avec quelque chose qui s'appelle Kentico, qui utilise cet éditeur. J'ai ajouté la ligne "CKEDITOR.config.allowedContent = true;" à mon config.js, mais il est toujours en train de reformater mon HTML, ce qui casse mon code Bootstrap, quelqu'un a des idées?
Tom Bowen

1
Merci pour la solution parfaite. Un jour pour moi.
Soony

61

J'ai trouvé une solution.

Cela désactive le filtrage, ça marche, mais ce n'est pas une bonne idée ...

config.allowedContent = true;

Jouer avec une chaîne de contenu fonctionne très 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.

Mon pari est donc d'autoriser n'importe quelle classe dans l'éditeur:

config.extraAllowedContent = '*(*)';

Cela autorise n'importe quelle classe et n'importe quel style en ligne.

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

Pour autoriser uniquement class = "asdf1" et class = "asdf2" pour toute 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 ...


1
c'est superberb ta
Rippo


10 étoiles pour votre réponse
Brijesh Mavani

Félicitations pour vos efforts!
Michel

15

Edit : cette réponse est pour ceux qui utilisent le module ckeditor dans drupal.

J'ai trouvé une solution qui ne nécessite pas de modifier le fichier js de ckeditor.

cette réponse est copiée d' ici . tous les crédits doivent aller à l'auteur original.

Allez dans "Admin >> Configuration >> CKEditor"; sous Profils, choisissez votre profil (par exemple Complet).

Modifiez ce profil, et sur "Options avancées >> Configuration JavaScript personnalisée" ajoutez config.allowedContent = true;.

entrez la description de l'image ici

N'oubliez pas de vider le cache sous "Onglet Performances".


4
Cette réponse est pour drupal uniquement ... mais de toute façon merci, car je cherchais juste une solution drupal.
LarS

1
@LarS intéressant. Je ne me souviens pas pourquoi je pensais que cette question était liée à drupal, mais il semble que cela ait aidé les gars de drupal.
sepehr

14

Depuis CKEditor v4.1, vous pouvez le faire dans config.js de CKEditor:

CKEDITOR.editorConfig = function( config ) {
  config.extraAllowedContent = '*[id](*)';  // remove '[id]', if you don't want IDs for HTML tags
}

Vous pouvez vous référer à la documentation officielle pour la syntaxe détaillée des règles de contenu autorisé


Vous avez eu une erreur de syntaxe ci-dessus. Spécifiquement, les attributs de style doivent être définis avec des braches bouclées {} au lieu de parens ()
kamelkev

Salut kamelkev, ma réponse est pour les classes , pas pour les styles , comme à la question. En gros, c'est ce que j'utilise, et je ne pense pas qu'il y ait d'erreur.
Marty ZHANG

Merci pour la réponse, vous avez *[id](*)fait le truc, j'ai essayé *[id,class]avant, mais cela ne permet pas l'attribut de classe d'une manière ou d'une autre. Les documents de CKeditor sont un peu comme un labyrinthe.
GDmac

1
+1 Comprendre les règles de contenu est probablement une meilleure solution que de désactiver tout filtrage, comme le suggèrent de nombreuses autres réponses.
Michael Martin-Smucker

10

si vous utilisez ckeditor 4.x, vous pouvez essayer

config.allowedContent = true;

si vous utilisez ckeditor 3.x, vous rencontrez peut-être ce problème .

essayez de mettre la ligne suivante dans config.js

config.ignoreEmptyParagraph = false;

config.ignoreEmptyParagraph=false;est la seule solution qui a fonctionné pour moi, parmi toutes les réponses que j'ai essayées. Je vous remercie.
Stefan

9

Cela s'appelle ACF (filtre de contenu automatique) dans ckeditor.Il supprime toutes les balises inutiles Ce que nous utilisons dans le contenu texte.L'utilisation de cette commande dans votre fichier config.js devrait désactiver cet ACK.

config.allowedContent = true;


4

Si vous utilisez Drupal ET le module appelé «WYSIWYG» avec la bibliothèque CKEditor, la solution de contournement suivante pourrait être une solution. Pour moi, cela fonctionne comme un charme. J'utilise CKEditor 4.4.5 et WYSIWYG 2.2 dans Drupal 7.33. J'ai trouvé cette solution de contournement ici: https://www.drupal.org/node/1956778 .

Le voici: je crée un module personnalisé et mets le code suivant dans le fichier ".module":

<?php
/**
 * Implements hook_wysiwyg_editor_settings_alter().
 */
function MYMODULE_wysiwyg_editor_settings_alter(&$settings, $context) {
  if ($context['profile']->editor == 'ckeditor') {
    $settings['allowedContent'] = TRUE;
  }
}
?>

J'espère que cela aidera d'autres utilisateurs de Drupal.


Merci pour cette réponse
drupale

3

Voici l'exemple complet pour CKEDITOR 4.x :

HTML

<textarea name="post_content" id="post_content" class="form-control"></textarea>

SCÉNARIO

CKEDITOR.replace('post_content', {
   allowedContent:true,
});

Le code ci-dessus autorisera toutes les balises dans l'éditeur.

Pour plus de détails: CK EDITOR Règles de contenu autorisé


0

J'ai trouvé que le passage à l'utilisation du html complet au lieu du html filtré (sous l'éditeur dans la liste déroulante Format du texte) est ce qui a résolu ce problème pour moi. Sinon, le style disparaîtrait.


0

Je voudrais ajouter ce config.allowedContent = true; doit être ajouté au fichier ckeditor.config.js pas au config.js, config.js n'a rien fait pour moi mais l'ajouter à la zone supérieure de ckeditor.config.js a gardé mes classes div


0

Une autre option si vous utilisez drupal est simplement d'ajouter le style css que vous souhaitez utiliser. de cette façon, il ne supprime pas le style ou le nom de classe.

donc dans mon cas, sous l'onglet css de drupal 7, ajoutez simplement quelque chose comme

facebook = span.icon-facebook2

vérifiez également que le bouton styles de police est activé


0

Je rencontre le même problème sur chrome avec ckeditor 4.7.1. Désactivez simplement pasteFilter sur ckeditor instanceReady.Cette propriété désactive toutes les options de filtre d'Advance Content Filter (ACF).

 CKEDITOR.on('instanceReady', function (ev) {
        ev.editor.pasteFilter.disabled = true;
    });
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.