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.

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:

• Filtrage de contenu dans CKEditor - pourquoi avez-vous besoin d'un filtre de contenu.
• Filtre de contenu avancé - dans une description détaillée du mécanisme de filtrage.
• Règles de contenu autorisées - comment écrire des règles de contenu autorisées.

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

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

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

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é

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;

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;

Veuillez vous référer au guide officiel Advanced Content Filter et au didacticiel d'intégration du plugin .

Vous trouverez bien plus que cela sur cette puissante fonctionnalité. Voir également config.extraAllowedContent qui semble adapté à vos besoins.

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.

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é

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.

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

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é

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;
    });