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';
};
If everything is allowed, you can use allowedContent = true