There are similar questions to this here on stackoverflow, but the answers in those questions do not work for me, so please don't flag this as a duplicate.
In my cms, I want people to be able to add content pages that are SPA (Single Page Applications). It is very mon for these kinds of apps to have nothing but a div with some attributes and javascript is used to load the app into the div. So I want users to be able to create content that consists only of an empty div with some attributes like this:
<div data-cscal-eventsource="default" data-cscal-height="550" id="eventCal" class="cs-eventcal"></div>
However ckeditor (I'm using version 4.6.2 at the moment) always removes the empty div. From googling and finding similar questions here I have tried various things in config:
allowedContent : true
is supposed to turn off all filtering but it still gets removed.
CKEDITOR.dtd.$removeEmpty['div'] = false;
is also found in some answers but does not work for me.
before setting allowedContent to true I tried various things with extraAllowedContent like this:
extraAllowedContent: 'div(*){*}[*]; ol li span a(*){*}[*]'
If the div has some text it works like this for example:
<div data-cscal-eventsource="default" data-cscal-height="550" id="eventCal" class="cs-eventcal">hello</div>
but I don't want that text and using a nbsp doesn't work either.
How can I make CKEditor leave my empty div alone? My div is the only content in the editor, the script and css for my SPA is added from outside the editor. I just need to be able to add the div without it being removed. I am trying to add the div using the sourcedialog.
I do not want to modify the ckeditor source code to solve this.
My plete code for clarity is like this, you can see in ments some of the things I have tried:
(function ($) {
var xsrfToken = $('[name="__RequestVerificationToken"]:first').val();
var dfUrl = $("#editorconfig").data("dropfileuploadurl") || '/filemanager/upload';
var fbUrl = $("#editorconfig").data("filebrowserurl") || '/filemanager/filedialog?type=file';
var ibUrl = $("#editorconfig").data("imagebrowseurl") || '/filemanager/filedialog?type=image';
var editorId = $("#editorconfig").data("editorid") || 'foo';
var datepickerid = $("#editorconfig").data("datepickerid") || 'foo';
var usingCdn = $("#editorconfig").data("usingcdn");
var editorConfig = {
toolbar: [['Sourcedialog', 'Maximize'],
['SelectAll', 'RemoveFormat', 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Print'],
['Undo', 'Redo', '-', 'Find', 'Replace', 'Bold', 'Italic', 'Underline', '-', 'Strike', 'Superscript'],
'/',
['Blockquote', 'Format'], ['NumberedList', 'BulletedList'],
['Link', 'Unlink', 'Anchor'],
['Image', 'oembed', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar','CodeSnippet']],
extraPlugins:'oembed,cloudscribe-filedrop,sourcedialog,codesnippet',
removePlugins: 'scayt,wsc',
format_tags: 'p;h1;h2;h3;h4;pre;address;div',
dropFileUploadUrl: dfUrl,
dropFileXsrfToken:xsrfToken,
linkWebSizeToOriginal:true,
forcePasteAsPlainText:true,
filebrowserWindowHeight:'70%',
filebrowserWindowWidth:'80%',
filebrowserBrowseUrl:fbUrl,
filebrowserImageBrowseUrl: ibUrl,
allowedContent : true, //temporary trying to disable filtering
extraAllowedContent: 'div(*){*}[*]; ol li span a(*){*}[*]', // allow all classes and attributes for these tags
fillEmptyBlocks: false
};
if (usingCdn === true) {
//alert('using cdn');
CKEDITOR.plugins.addExternal('widget', '/ckjs/plugins/widget/', 'plugin.js');
CKEDITOR.plugins.addExternal('widgetselection', '/ckjs/plugins/widgetselection/', 'plugin.js');
CKEDITOR.plugins.addExternal('lineutils', '/ckjs/plugins/lineutils/', 'plugin.js');
CKEDITOR.plugins.addExternal('oembed', '/ckjs/plugins/oembed/', 'plugin.js');
CKEDITOR.plugins.addExternal('cloudscribe-filedrop', '/ckjs/plugins/cloudscribe-filedrop/', 'plugin.js');
}
//editorConfig.protectedSource.push(/<div[^>]*><\/div>/g);
//CKEDITOR.dtd.$removeEmpty['div'] = false;
//$.each(CKEDITOR.dtd.$removeEmpty, function (i, value) {
// CKEDITOR.dtd.$removeEmpty[i] = 0;
//});
var ck = CKEDITOR.replace(editorId, editorConfig);
ck.on('instanceCreated', function (ev) {
CKEDITOR.dtd.$removeEmpty['div'] = false;
});
var userLocale = $('#' + datepickerid).data("locale");
$('#' + datepickerid).datetimepicker({
debug: false,
widgetPositioning: { horizontal: 'left', vertical: 'bottom' },
keepOpen: true,
allowInputToggle: true,
locale: userLocale
});
})(jQuery);
There are similar questions to this here on stackoverflow, but the answers in those questions do not work for me, so please don't flag this as a duplicate.
In my cms, I want people to be able to add content pages that are SPA (Single Page Applications). It is very mon for these kinds of apps to have nothing but a div with some attributes and javascript is used to load the app into the div. So I want users to be able to create content that consists only of an empty div with some attributes like this:
<div data-cscal-eventsource="default" data-cscal-height="550" id="eventCal" class="cs-eventcal"></div>
However ckeditor (I'm using version 4.6.2 at the moment) always removes the empty div. From googling and finding similar questions here I have tried various things in config:
allowedContent : true
is supposed to turn off all filtering but it still gets removed.
CKEDITOR.dtd.$removeEmpty['div'] = false;
is also found in some answers but does not work for me.
before setting allowedContent to true I tried various things with extraAllowedContent like this:
extraAllowedContent: 'div(*){*}[*]; ol li span a(*){*}[*]'
If the div has some text it works like this for example:
<div data-cscal-eventsource="default" data-cscal-height="550" id="eventCal" class="cs-eventcal">hello</div>
but I don't want that text and using a nbsp doesn't work either.
How can I make CKEditor leave my empty div alone? My div is the only content in the editor, the script and css for my SPA is added from outside the editor. I just need to be able to add the div without it being removed. I am trying to add the div using the sourcedialog.
I do not want to modify the ckeditor source code to solve this.
My plete code for clarity is like this, you can see in ments some of the things I have tried:
(function ($) {
var xsrfToken = $('[name="__RequestVerificationToken"]:first').val();
var dfUrl = $("#editorconfig").data("dropfileuploadurl") || '/filemanager/upload';
var fbUrl = $("#editorconfig").data("filebrowserurl") || '/filemanager/filedialog?type=file';
var ibUrl = $("#editorconfig").data("imagebrowseurl") || '/filemanager/filedialog?type=image';
var editorId = $("#editorconfig").data("editorid") || 'foo';
var datepickerid = $("#editorconfig").data("datepickerid") || 'foo';
var usingCdn = $("#editorconfig").data("usingcdn");
var editorConfig = {
toolbar: [['Sourcedialog', 'Maximize'],
['SelectAll', 'RemoveFormat', 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Print'],
['Undo', 'Redo', '-', 'Find', 'Replace', 'Bold', 'Italic', 'Underline', '-', 'Strike', 'Superscript'],
'/',
['Blockquote', 'Format'], ['NumberedList', 'BulletedList'],
['Link', 'Unlink', 'Anchor'],
['Image', 'oembed', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar','CodeSnippet']],
extraPlugins:'oembed,cloudscribe-filedrop,sourcedialog,codesnippet',
removePlugins: 'scayt,wsc',
format_tags: 'p;h1;h2;h3;h4;pre;address;div',
dropFileUploadUrl: dfUrl,
dropFileXsrfToken:xsrfToken,
linkWebSizeToOriginal:true,
forcePasteAsPlainText:true,
filebrowserWindowHeight:'70%',
filebrowserWindowWidth:'80%',
filebrowserBrowseUrl:fbUrl,
filebrowserImageBrowseUrl: ibUrl,
allowedContent : true, //temporary trying to disable filtering
extraAllowedContent: 'div(*){*}[*]; ol li span a(*){*}[*]', // allow all classes and attributes for these tags
fillEmptyBlocks: false
};
if (usingCdn === true) {
//alert('using cdn');
CKEDITOR.plugins.addExternal('widget', '/ckjs/plugins/widget/', 'plugin.js');
CKEDITOR.plugins.addExternal('widgetselection', '/ckjs/plugins/widgetselection/', 'plugin.js');
CKEDITOR.plugins.addExternal('lineutils', '/ckjs/plugins/lineutils/', 'plugin.js');
CKEDITOR.plugins.addExternal('oembed', '/ckjs/plugins/oembed/', 'plugin.js');
CKEDITOR.plugins.addExternal('cloudscribe-filedrop', '/ckjs/plugins/cloudscribe-filedrop/', 'plugin.js');
}
//editorConfig.protectedSource.push(/<div[^>]*><\/div>/g);
//CKEDITOR.dtd.$removeEmpty['div'] = false;
//$.each(CKEDITOR.dtd.$removeEmpty, function (i, value) {
// CKEDITOR.dtd.$removeEmpty[i] = 0;
//});
var ck = CKEDITOR.replace(editorId, editorConfig);
ck.on('instanceCreated', function (ev) {
CKEDITOR.dtd.$removeEmpty['div'] = false;
});
var userLocale = $('#' + datepickerid).data("locale");
$('#' + datepickerid).datetimepicker({
debug: false,
widgetPositioning: { horizontal: 'left', vertical: 'bottom' },
keepOpen: true,
allowInputToggle: true,
locale: userLocale
});
})(jQuery);
- 1 Did you ever solve this problem? I have the same issue and none of the answers I found resolves it. – Stefan Commented Nov 28, 2018 at 8:55
- 1 No I didn't. I made an option to disable the editor per page in my cms so users could just use a plain textarea to put in an empty div for a SPA – Joe Audette Commented Nov 28, 2018 at 13:36
4 Answers
Reset to default 2config.basicEntities = false; //in your cke.editor config js file
Works for me.
UPDATE
Try this and see if it works, but i can have empty divs no problem.
for (var tag in CKEDITOR.dtd.$removeEmpty) {
CKEDITOR.dtd.$removeEmpty[tag] = false;
}
UPDATE 2
Also try this, I have this in my config that does not remove empty div's
config.htmlEncodeOutput = false;
Pretty tricky - in my case I needed to set
config.ignoreEmptyParagraph = false;
to finally having the DIV shown ... beside
CKEDITOR.dtd.$removeEmpty.div = 0
and having DIVS allowed at all ...
I think it's late but I reply here for any reference. We can set in config.js of CKEditor config.extraAllowedContent = 'div style;*id';
Note: I'm using CKEditor 4
In CKEditor, you can have a configuration file.
And you can add the custom config with the options here.