web-dev-qa-db-fra.com

CKEditor supprime automatiquement les classes de div

J'utilise CKEditor comme éditeur back-end sur mon site web. Cela me conduit cependant au virage car il semble vouloir changer le code à sa guise chaque fois que j'appuie sur le bouton source. Par exemple, si je tape sur la source et crée un <div>...

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

Puis, sans raison apparente, il supprime la classe du <div>, de sorte que lorsque je clique à nouveau sur la source, il est remplacé par ...

<div>some content</div>

Je suppose que ce comportement irritant peut être désactivé dans le config.js, mais je suis en train de creuser et je ne trouve rien dans la documentation qui puisse l'éteindre.

classhtmlckeditor
134
Iain Simpson

Désactivation du filtrage de contenu

La solution la plus simple consiste à config.js et à définir:

config.allowedContent = true;

( N'oubliez pas de vider le cache du navigateur ). CKEditor cesse alors de filtrer le contenu saisi. Cependant, ceci désactivera totalement filtrage du conten , qui est l’une des fonctionnalités les plus importantes de CKEditor.

Configuration du filtrage de contenu

Vous pouvez également configurer filtre de contenu de CKEditor plus précisément pour n'autoriser que les éléments, classes, styles et attributs dont vous avez besoin. Cette solution est bien meilleure, car CKEditor supprimera tout de même beaucoup de HTML déplaisant produit par les navigateurs lors de la copie et du collage de contenu, mais ne supprimera pas le contenu que vous souhaitez.

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

config.extraAllowedContent = 'div(*)';

Ou quelques Bootstrap stuff:

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

Vous pouvez également autoriser les listes de description avec les attributs dir facultatifs pour les éléments dt et dd:

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

Ce ne sont 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 certaines choses et redéfinir totalement les règles de CKEditor. En savoir plus sur:

279
Iain Simpson

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

Donc, mon pari est de permettre n'importe quelle classe dans l'éditeur est:

config.extraAllowedContent = '*(*)';

Cela permet 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 une 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 ...

56
Tommy at LIW

Edit : cette réponse s'adresse à ceux qui utilisent le module ckeditor dans drupal.

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

cette réponse est copiée de 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, sous "Options avancées >> Configuration JavaScript personnalisée", ajoutez config.allowedContent = true;.

enter image description here

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

15
sepehr

Depuis CKEditor v4.1, vous pouvez le faire dans le fichier 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 de la syntaxe détaillée des règles de contenu autorisées

14
Marty ZHANG

si vous utilisez ckeditor 4.x, vous pouvez essayer

config.allowedContent = true;

si vous utilisez ckeditor 3.x, il se peut que vous ayez ce problème .

essayez de mettre la ligne suivante dans config.js

config.ignoreEmptyParagraph = false;
10
Wasif.Butt

Cela s'appelle ACF (filtre de contenu automatique) dans ckeditor.Il supprime tous les éléments non utilisés de la balise unnessary dans le contenu de texte.L'utilisation de cette commande dans votre fichier config.js devrait désactiver cet ACK.

config.allowedContent = true;
9
Mari Selvan

Veuillez vous référer aux guide officiel de filtrage de contenu avancé et tutoriel d'intégration de plug-in .

Vous trouverez beaucoup plus que cela à propos de cette fonctionnalité puissante. Voir aussi config.extraAllowedContent qui semble convenir à vos besoins.

6
oleq

Si vous utilisez Drupal ET le module appelé "WYSIWYG" avec la bibliothèque CKEditor, la solution de contournement suivante peut constituer 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 .

La voici: je crée un module personnalisé et place 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 les autres Drupal.

4
pyretta

Voici l'exemple complet pour CKEDITOR 4.x :

HTML

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

SCRIPT

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ées

2
Sanchit Gupta

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

0
cdavidyoung

Une autre option si vous utilisez drupal consiste simplement à ajouter le style CSS que vous souhaitez utiliser. De cette façon, le nom du style ou de la classe ne sera pas effacé.

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

facebook = span.icon-facebook2

vérifier également que le bouton polices-styles est activé

0
Daniel

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

0
Alpdog14

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 filtrage du filtre de contenu avancé (ACF).

 CKEDITOR.on('instanceReady', function (ev) {
        ev.editor.pasteFilter.disabled = true;
    });
0
pandian_Snkl