CKEditor ShowProtected moves handlebars code - ckeditor

Question

If you are using CKEditor with handlebars code, you can mark handlebars code as protected using
config.protectedSource.push(/{{[/|#][\s\S]*?}}/g);
This works well but hides the handlebars code in the main WYSIWYG editor.
The showprotected plugin (https://ckeditor.com/cke4/addon/showprotected) can then be used to display an icon whenever there is handlebars code.
But, if you have code like
<ul>
{{#each Books}}
<li>{{Title}}</li>
{{/each}}
</ul>
the CKEditor changes the HTML into this:
{{#each Books}}{{/each}}
<ul>
<li>{{Title}}</li>
</ul>
I have set
config.allowedContent = true;
but this does not help. Any ideas?

Answer 1

The problem is the CKEditor DTD which controls how HTML elements are allowed to be nested.
When the CKEditor displays in WYSIWYG mode, the showprotected plugin displays a small icon instead of the handlebars code. This effectively creates the following html:
<ul>
<img class='cke_protected'..../>
<li>{{Title}}</li>
<img class='cke_protected'..../>
</ul>
Images are not allowed to be placed directly inside UL tags and so CKEditor rearranges it into
<img class='cke_protected'..../><img class='cke_protected'..../>
<ul>
<li>{{Title}}</li>
</ul>
You can fix this problem by telling the DTD that image tags are allowed inside the UL tags
CKEDITOR.dtd['ul']['img'] = true;