web-dev-qa-db-fra.com

CKEditor strips <i> Tag

J'essaie de trouver une solution pour éviter CKEditor, mais aussi l'ancien FCKeditor supprime tout <i> balise du contenu précédemment inséré dans la base de données.

Cas:

J'insère du contenu html dans la base de données, certains contenus contiennent le <i> éléments. Je le fais avec le CKEditor. Tout fonctionne parfaitement et le contenu apparaît sur la page Web. Mais quand je veux éditer le contenu précédemment inséré, le <i> les éléments sont manquants.

Dans mon cas spécifique, j'utilise: 

<i class="fa-icon-fullscreen fa-icon-xxlarge main-color"></i>

Bien sûr, si je désactive l'éditeur, le contenu apparaît très bien dans la zone de texte.

tagsckeditorfckeditor
45
HenryW

J'ai trouvé la solution à ce problème spécifique que j'ai rencontré avec le <i> tag

La réponse originale que j'ai obtenue de forum drupal

Le correctif ou Tweak (vous l'appelez) pour cela consiste à définir ce qui suit dans le fichier config.js de ckeditors:

// ALLOW <i></i>
config.protectedSource.Push(/<i[^>]*><\/i>/g);

Merci à Spasticdonkey de m'avoir pointé sur le lien.

53
HenryW

Lorsque la solution protectedSource est utilisée, les balises i ne sont plus supprimées, mais les balises img cessent de s'afficher dans le mode WYSIWIG de CKEditor (j'utilise 4.3.1). La solution qui a mieux fonctionné pour moi consiste à désactiver la suppression des balises i vides à l'aide de CKEDITOR.dtd.$removeEmpty

Par exemple, j'ai ajouté ce qui suit au fichier config.js

// allow i tags to be empty (for font awesome)
CKEDITOR.dtd.$removeEmpty['i'] = false;

Remarque: Cela doit être placé en dehors de la fonction CKEDITOR.editorConfig = function( config ).

62
Mike Peterson

Voici ce qui fonctionne pour moi

ajoutez les 3 lignes de code ci-dessous dans le même ordre dans le paramètre drupal ckeditor profile admin/config/content/ckeditor/edit/Full

OPTIONS AVANCÉES >> Configuration JavaScript personnalisée

    config.allowedContent = true;
    config.extraAllowedContent = 'p(*)[*]{*};div(*)[*]{*};li(*)[*]{*};ul(*)[*]{*}';
    CKEDITOR.dtd.$removeEmpty.i = 0;

La première ligne désactive à peu près le filtrage avancé

La deuxième ligne autorise TOUTES les classes (), tout style {} et tout attribut [*] pour p, div, li et ul.

La dernière ligne est pour la balise vide ... cette ligne fonctionne avec les images ... J'ai trouvé que si vous utilisez config.protectedSource.Push (/] *> </i>/g); il supprime la balise lors de l'édition.

23
Alauddin

pour la version 4.3 ckeditor

dans config.js (après la section config) coller

CKEDITOR.dtd.$removeEmpty['b'] = false;

et écrire un widget avec du code

CKEDITOR.plugins.add( 'bwcaret', {
requires: ['widget'/*, 'richcombo'*/],

icons: 'bwcaret',

init: function( editor ) {

    editor.widgets.add( 'bwcaret', {

        button: 'Create a caret',

        template: '<b class="caret"></b>',


        allowedContent: 'b(!caret)',

        requiredContent: 'b(!caret)',

        upcast: function( element ) {
            return element.name == 'b' && element.hasClass( 'caret' );
        },

    });
}

});

5
Andrey

Il y a deux problèmes possibles:

  • En savoir plus sur Advanced Content Filter . CKEditor supprime les éléments qui ne sont pas autorisés, mais vous pouvez étendre les règles du filtre.

  • Cependant, si le problème est que CKEditor supprime les éléments <i> Vides, vous devez trouver une autre manière de l'utiliser. CKEditor n'est pas un constructeur de sites Web WYSIWYG. Il s'agit d'un éditeur de documents, le contenu chargé doit donc avoir une signification. L'élément inline vide n'a aucune signification, il est donc supprimé, car sinon l'éditeur ne saurait pas quoi en faire.

    L'une des solutions possibles dans un avenir (proche) sera d'utiliser système Widgets , pour gérer ces éléments vides. Mais pour l'instant, je vous conseille de vérifier le CKEDITOR.htmlDataProcessor et petit guide comment l'utiliser.

3
Reinmar

j'ai trouvé une solution permanente pour cela. en fait ce qui s'est passé ckeditor supprimant seulement la balise vide. quelle que soit la balise, peut b balise <i> ou <span>

si vous utilisez une icône comme font-awesome, maeterlize icon etc ... vous pouvez l'arrêter en utilisant le code ci-dessous dans votre fichier config.js

CKEDITOR.dtd.$removeEmpty.span = false; 
CKEDITOR.dtd.$removeEmpty.i = false;

si vous utilisez plus de balises vides, vous devez ajouter le nom de la balise après $removeEmpty

2
Soubhagya Kumar