Limit specific nesting in CKEditor
tl; dr I don't want to allow nested tables in fiddle
I am trying to restrict the html as much as possible allowed in my CKEditor. One of the rules I'm trying to apply is to only allow tables at the root and there are definitely no nested tables. There lies my problem ... I've tried using config entries allowedContent
, disallowedContent
and dumping with change CKEDITOR.dtd
until nothing works.
// doesnt seem to do anything
// CKEDITOR.dtd.$blockLimit.table = 0;
// cannot create table at all
// CKEDITOR.dtd.td.table = 0;
CKEDITOR.replace('editor1', {
customConfig: '',
toolbarGroups: [
{ name: 'blocks', groups: [ 'insert'] }
],
removeButtons: 'Image,HorizontalRule,SpecialChar,Blockquote',
// disallowedContent: {
// table: {
// match: function( element ) {
// no way to access what the parent element is
// }
// }
// }
});
source to share
Eventually found a solution at dtd. The problem where deleting table
from CKEDITOR.dtd.td
made it impossible to create the table at all was a bug in CKEditor.
CKEDITOR.dtd.td
points to the same object as CKEDITOR.dtd.body
some others. So if I CKEDITOR.dtd.td
only want to change , I need to make a copy of the object reference and work on it.
// using Lo-Dash to create a copy of the object
CKEDITOR.dtd.td = _.merge({}, CKEDITOR.dtd.td);
delete CKEDITOR.dtd.td.table;
CKEDITOR.replace('editor1', {
customConfig: '',
toolbarGroups: [
{ name: 'blocks', groups: [ 'insert'] }
],
removeButtons: 'Image,HorizontalRule,SpecialChar,Blockquote'
});
This gives the desired result of a button greyed out when the cursor is inside a table cell, but a normal button when in the body.
See the updated Fiddle .
source to share
I updated your JsFiddle and now it removes the nested table markup but leaves its content:
CKEDITOR.replace('editor1', {
customConfig: '',
toolbarGroups: [
{ name: 'blocks', groups: [ 'insert'] }
],
removeButtons: 'Image,HorizontalRule,SpecialChar,Blockquote',
disallowedContent: {
tr: {
match: function( element ) {
var parentTableCount = 0;
for (var elem = element.parent; elem; elem = elem.parent)
{
if (elem.name == 'table')
parentTableCount++;
if (parentTableCount > 1)
return true;
}
}
},
table: {
match: function( element ) {
for (var elem = element.parent; elem; elem = elem.parent)
{
if (elem.name == 'table')
return true;
}
}
}
}
});
You can customize it to suit your needs, as my example basically shows how you can access the parent elements. Hope it helps.
source to share