4

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

<a href="#"><p>something</p></a>

But new CKEditor version still repair this code, so where is problem? Is necessary to set HTML 5 as default in config?

Michael Irigoyen
  • 22,513
  • 17
  • 89
  • 131
Earlgray
  • 647
  • 1
  • 8
  • 31
  • it is something that is reported in their ticket system [ticket 8442](http://dev.ckeditor.com/ticket/8442) and [ticket 7961](http://dev.ckeditor.com/ticket/7961) – t.niese May 16 '13 at 15:26
  • I am not sure if you are looking for an alternate solution that can work with html5, but [wysihtml5](http://xing.github.io/wysihtml5) can be mentioned here. – Ram on Rails May 02 '14 at 04:58

4 Answers4

6

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.

oleq
  • 15,697
  • 1
  • 38
  • 65
  • An now... No other advance, even with the release of the definitive [HTML5 Recommendation](http://www.w3.org/TR/html5/)? – Peter Krauss Nov 25 '14 at 11:58
4

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

Shannon Hochkins
  • 11,763
  • 15
  • 62
  • 95
1

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

Xavier F.
  • 11
  • 1
0

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.

Paal
  • 1