HTML5 transparent content model support - block-level links

[anand-s-ndaq]

Are you reporting a feature or a bug?

Feature Request - to extend support for HTML 5 markup

Provide detailed reproduction steps (if any)

1. Create a static html page with latest CKEditor.
2. In script, set the editor to allow all content viz. config.allowedContent = true
3. Load the html page in a browser and switch to 'source' mode
4. Enter the following HTML 5 compliant markup:
   <a href="#"><div class="a">something in A </div><div lass="b">some thing in B</div></a>
5. Switch to WYSIWYG mode and then back to source mode
6. Note that the markup is no longer the same but has been transformed to :
   <div class="a"><a href="#">something in A </a></div>

Expected result

<a href="#"><div class="a">something in A </div></a>

Actual result

<div class="a"><a href="#">something in A </a></div>

References

• html5 block-level link
• Transparent Content Models Spec

Other details

This behavior has been noted in stackover flow

• Browser: Any
• OS: Any
• CKEditor version: 4.1+
• Installed CKEditor plugins: default

[mlewand]

I have limited the scope of this issue so that it is better defined.

There will be a challenge with that, as we currently use a static DTD, while solving this issue will require from us using a context-aware model determination.

[prob6]

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