We're trying to add a custom style format to TinyMCE which acts as a wrapper but don't want it to appear inside another DIV, table cell or list.
We thought that we could achieve this with the valid_children option but it is being ignored.
Here is a test configuration;
tinymce.init({
selector: 'textarea.tinymce',
width: '100%',
height: 600,
plugins: [
'advlist autolink link lists anchor',
'visualblocks visualchars code',
'table paste'
],
style_formats: [
{'title': 'Test', 'block': 'div', 'wrapper': true, 'block_expand': true, 'deep': true, 'classes': 'test', 'remove': 'all'}
],
valid_children: '-div[div], -li[div], -ul[div], -ol[div], -td[div], -th[div]',
});
And here's a fiddle: https://jsfiddle.net/r4ymo893/
If you make a selection that contains part of a list or table then the wrapper is applied inside each list/cell which breaks the rules we set in valid_children
Any help would be much appreciated!
I think its cause you have valid_children twice. Need to update to this:
tinymce.init({
selector: 'textarea.tinymce',
width: '100%',
height: 600,
plugins: [
'advlist autolink link lists anchor',
'visualblocks visualchars code',
'table paste'
],
style_formats: [
{'title': 'Test', 'block': 'div', 'wrapper': true, 'block_expand': true, 'deep': true, 'classes': 'test', 'remove': 'all'}
],
valid_children: '+body[style], -div[div], -li[div], -ul[div], -ol[div], -td[div], -th[div]',
});