Ckeditor supprime automatiquement les classes des div

Question

J'utilise CKEditor en tant qu'éditeur back-end sur mon site web. Il me fait cependant tourner en bourrique car il semble vouloir modifier le code comme il l'entend dès que j'appuie sur le bouton source. Par exemple, si j'appuie sur le bouton source et que je crée un <div> ...

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

Ensuite, sans raison apparente, la classe est retirée de la liste des classes. <div> donc quand j'ai appuyé sur la source à nouveau, il a été changé en...

<div>some content</div>

Je présume que ce comportement irritant peut être désactivé dans l'interface utilisateur. config.js mais j'ai cherché et je n'ai rien trouvé dans la documentation pour le désactiver.

Answer 1

Désactiver le filtrage de contenu

La solution la plus simple est d'aller dans le config.js et le cadre :

config.allowedContent = true;

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

Configuration du filtrage du contenu

Vous pouvez également configurer Le 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 toujours une grande partie du HTML de mauvaise qualité que les navigateurs produisent lorsqu'ils copient et collent du contenu, mais il ne supprimera pas le contenu que vous voulez.

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

config.extraAllowedContent = 'div(*)';

Ou des trucs de Bootstrap :

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

Ou vous pouvez autoriser des listes de descriptions avec des options dir attributs pour dt y dd éléments :

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

Ce ne sont là que des exemples très simples. Vous pouvez écrire toutes sortes de règles - exigeant des attributs, des classes ou des styles, ne faisant correspondre que des éléments spéciaux, faisant correspondre tous les éléments. Vous pouvez également interdire des éléments et redéfinir totalement les règles de CKEditor. Lire la suite :

• Filtrage du contenu dans CKEditor - pourquoi avez-vous besoin d'un filtre de contenu.
• Filtre de contenu avancé - dans la description approfondie du mécanisme de filtrage.
• Règles relatives au contenu autorisé - comment rédiger des règles de contenu autorisé.

Answer 2

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 bien pour l'id, etc., mais pas pour les attributs de classe et de style, car vous avez () et {} pour le filtrage des classes et des styles.

Donc, je parie que pour autoriser n'importe quelle classe dans l'éditeur est :

config.extraAllowedContent = '*(*)';

Cela permet d'utiliser 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 n'autoriser que les class="asdf" pour la balise p :

config.extraAllowedContent = 'p(asdf)';

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

config.extraAllowedContent = '*[id]';

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

Answer 3

Modifier : 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 js de ckeditor.

cette réponse est copiée de aquí . tous les crédits doivent aller à l'auteur original.

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

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

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

Answer 4

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 de la syntaxe détaillée des règles de contenu autorisé

Answer 5

Si vous utilisez ckeditor 4.x vous pouvez essayer

config.allowedContent = true;

si vous utilisez ckeditor 3.x, vous pouvez avoir cette question .

essayez de mettre la ligne suivante dans config.js

config.ignoreEmptyParagraph = false;