web-dev-qa-db-fra.com

Comment autoriser tous les tags et attributs HTML avec CKeditor?

J'essaie d'autoriser toutes les balises HTML 

<div> <p> <span> <i> /* etc */

et attributs HTML comme ci-dessous (classe, id) pour par exemple:

<div id="foo" class="bar" style="z-index:1;">SOME COOL CONTENT HERE</div>

dans ckeditor. 

J'ai trouvé quelque chose comme dans docs.ckeditor.com

config.allowedContent = {
    $1: {
        // Use the ability to specify elements as an object.
        elements: CKEDITOR.dtd,
        attributes: true,
        styles: true,
        classes: true
    }
};
config.disallowedContent = 'script; *[on*]';

et l'a ajouté à config.js dans le dossier racine de ckeditor. Mais rien n'a changé. Lorsque j'essaie d'ajouter des balises HTML au bloc de code source de ckeditor, il efface tout le contenu html. 

Qu'est-ce qui me manque? Merci d'avance.

Version: ## CKEditor 4.4.7

EDIT & UPDATE:  

Après les réponses @Eelke et @Necreaux, j’ai ajouté allowedContent = true dans mon config.js. Maintenant, les éléments HTML de base tels que <div> <span> <h3> fonctionnent parfaitement. Mais ckeditor continue à utiliser des balises <i>.

Complètement Config JS 

    CKEDITOR.editorConfig = function( config ) { 
    config.allowedContent = true;
    config.removeFormatAttributes = '';
    // Define changes to default configuration here.
    // For complete reference see:
    // http://docs.ckeditor.com/#!/api/CKEDITOR.config

    // The toolbar groups arrangement, optimized for two toolbar rows.
    config.toolbarGroups = [
        { name: 'clipboard',   groups: [ 'clipboard', 'undo' ] },
        { name: 'editing',     groups: [ 'find', 'selection', 'spellchecker' ] },
        { name: 'links' },
        { name: 'insert' },
        { name: 'forms' },
        { name: 'tools' },
        { name: 'document',    groups: [ 'mode', 'document', 'doctools' ] },
        { name: 'others' },
        '/',
        { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
        { name: 'paragraph',   groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },
        { name: 'styles' },
        { name: 'colors' },
        { name: 'about' }
    ];

    // Remove some buttons provided by the standard plugins, which are
    // not needed in the Standard(s) toolbar.
    config.removeButtons = 'Underline,Subscript,Superscript';

    // Set the most common block elements.
    config.format_tags = 'p;h1;h2;h3;pre;';

    // Simplify the dialog windows.
    config.removeDialogTabs = 'image:advanced;link:advanced';
};
javascriptregexckeditor
15
HddnTHA

La première chose à faire est de savoir pourquoi certains éléments, attributs, styles et classes sont supprimés quel que soit leur contenu. Ceci est causé par le Filtre de contenu avancé . Voir cette question pour plus de détails sur la modification de ses paramètres: CKEditor supprime automatiquement les classes de div

Une autre chose est pourquoi les éléments en ligne vides sont supprimés, qu'ils soient autorisés ou non. Cette question a également déjà été posée - voir les bandes CKEditor <i> Tag - remarque: il n’ya pas qu’une bonne réponse.

11
Reinmar

Si tout est permis, vous pouvez utiliser allowedContent = true

10
Eelke

Avez-vous essayé le suivant?

config.allowedContent = true;
config.removeFormatAttributes = '';
7
Necreaux

voici les balises que CKEditor 4 supprime lorsqu'elles sont vides:

abbr, acronyme, b, bdi, bdo, gros, citer, code, del, dfn, em, police, i, ins, étiquette, marque, compteur, sortie, q, Ruby, s, samp, petit grève, forte, sous, sup, temps, tt, u, var

pour autoriser toutes les balises vides - essayez d'ajouter ceci à config.js:

for(var tag in CKEDITOR.dtd.$removeEmpty){
    CKEDITOR.dtd.$removeEmpty[tag] = false;
}
3
no81no

Avez-vous essayé cela?

<script>
        CKEDITOR.replace( 'text-area-id' );
        CKEDITOR.config.allowedContent = true;
</script>
1
Tayyab_Hussain

Réponse pour CKEditor 4.

N'allez pas avec l'ancienne version de CKEditor et ce type de configuration.

Ajoutez simplement config.allowedContent = true; dans votre configuration. Il permettra à toutes les balises.

0
Deva