How to allow all html tags and attributes with CKeditor?

HddnTHA picture HddnTHA · Mar 3, 2015 · Viewed 45.3k times · Source

I'm trying to allow all html tags

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

and html attributes like below (class, id) for eg:

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

in ckeditor.

I found something like in 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*]';

and added it to config.js in ckeditor's root folder. But nothing changed. When i'm trying to add some html tags on ckeditor's source code block it's erasing all of html contents.

What am i missing? Thanks in advance.

Version: ## CKEditor 4.4.7


EDIT & UPDATE:

After @Eelke and @Necreaux answers i added allowedContent = true in my config.js. Now basic html elements such <div> <span> <h3> working perfectly. But ckeditor still striping <i> tags.

Completely 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';
};

Answer

Eelke picture Eelke · Mar 3, 2015

If everything is allowed, you can use allowedContent = true