I have the following valid (x)HTML5:
<a class="align-left" data-lightbox="on" data-spotlight="effect:fade;" href="http://www.bigger.ch/images/science/firstdays-lg.jpg"><img alt="First days in Africa" src="http://www.bigger.ch/images/science/firstdays-sm-bw.jpg" style="float: left; margin: 0pt 10px; width: 250px; height: 157px" /><div class="overlay"><img alt="First days in Africa" src="http://www.bigger.ch/images/science/firstdays-sm.jpg" /></div></a>
This is erroneously changed to:
<p>
<a class="align-left" data-lightbox="on" data-spotlight="effect:fade;" href="http://www.bigger.ch/images/science/firstdays-lg.jpg"><img alt="First days in Africa" src="http://www.bigger.ch/images/science/firstdays-sm-bw.jpg" style="float: left; margin: 0pt 10px; width: 250px; height: 157px" /></a></p>
<div class="overlay">
<a class="align-left" data-lightbox="on" data-spotlight="effect:fade;" href="http://www.bigger.ch/images/science/firstdays-lg.jpg"><img alt="First days in Africa" src="http://www.bigger.ch/images/science/firstdays-sm.jpg" /></a></div>
How to prevent this from happening?
Unfortunately, as of today
Unfortunately, as of today CKEditor does not support transparent HTML5 elements (elements that change their nature depending on context). Our parser and many algorithms were based on static DTD and that worked perfectly for previous HTML (and XHTML) versions. However, HTML5 spec made quite a revolution - there's no DTD because HTML5 cannot be defined in one (new schema languages have been created like ISO RELAX NG which are capable of defining HTML5). So our approach is outdated and it will take time before we'll fix this. You can follow this ticket http://dev.ckeditor.com/ticket/9457
Piotrek (Reinmar) Koszuliński
CKEditor JavaScript Developer
--
CKSource - http://cksource.com
--
Follow CKEditor on: Twitter | Facebook | Google+
Exclude code from going through parser?
Can code be completely excluded from going through the parser, for example by enclosing it in a (specific) DIV element and modifying the configuration of CKEditor to ignore the code within it?
The simplest solution may be
The simplest solution may be to use protectedSource, although this will hide this content completely. If this is not enough, then you'll need to play with toHtml and toDataFormat events :) Basically, what you need to do is replacing your block link with a comment or valid element before content is passed to parser (you'll find information about that in toHtml documentation) and after editor does all changes and serialized content back to HTML string do reverse replacement. This is mostly regexp work and you'll find examples of very similar solutions here https://github.com/ckeditor/ckeditor-dev/blob/master/core/htmldataprocessor.js
However, incorrect (from CKEditor POV) content loaded inside editor may cause unexpected behaviours - either from browsers (contenteditable implementations have been created long before someone thought that link will be a block) or from CKEditor itself.
Piotrek (Reinmar) Koszuliński
CKEditor JavaScript Developer
--
CKSource - http://cksource.com
--
Follow CKEditor on: Twitter | Facebook | Google+
OK, it's NOK
In other words, it is not really possible.