Is Ckeditor 4 Really Ready For Html5

I try new CKEditor 4 because code correction in version 3.6 can't accept HTML 5 valid code like this:

something

But new CKEditor ver

Solution 1:

Nope. CKEditor parsers are using static DTD. HTML5 cannot be described with static DTD so at the moment CKEditor cannot support this kind of markup.

See the ticket to know more.

Solution 2:

For future people coming to this with the same issue, I did come up with a solution but I'm not overly happy about it as there should be an option for this as it's PERFECTLY valid in HTML5

In your config.js file, add in the following config setting:

config.protectedSource.push(/[\r|\n]|(<a([^*>]+>)|<\/a>)/g);

Here's a demo of the regex working: DEMO

Basically all we're doing here is:

1. Finds new lines \r
2. Finds new rows \n
3. Finds any opening anchors: <a followed by an text until we come to > - (<a([^*>]+>)
4. Finds closing anchor tags <\/a>

This regex will stop validing the found results, I'm sure there's a better way to do this as I'm not regexPERT (<-- good at puns though!)

This should disable the UI for editing anchors in wysiwyg mode. This fixed worked for me because the editors I'm adding this to are fixed in source mode, so this is fine for this purpose.

config.allowedContent = true;config.fullPage = false;

Hope this helps

Solution 3:

In your config.js file, add in the following config setting:

// Display all children elements allowed in a <a> element.console.log(CKEDITOR.dtd[ 'a' ]);

// Simply redefine DTD like this:CKEDITOR.dtd['a']['div'] = 1;
CKEDITOR.dtd['a']['p'] = 1;
CKEDITOR.dtd['a']['i'] = 1;
CKEDITOR.dtd['a']['span'] = 1;

// Check if <div> can be contained in a <p> element.console.log( !!CKEDITOR.dtd[ 'a' ][ 'div' ] ); // default false// Check if <a> can be contained in a <div> element.console.log( !!CKEDITOR.dtd[ 'div' ][ 'a' ] ); // default true

For Drupal 8, you can add this code into your admin theme js, not the best solution but functional

Solution 4:

There is a workable way around this using xsl to map any unknown element to either a div or a span-tag using the original element as classname, and then reverse this onsubmit. We do that all the time from and back to xml, and it works just fine.