Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

HTML5 transparent content model support - block-level links #514

Open
anand-s-ndaq opened this issue Jun 15, 2017 · 2 comments
Open

HTML5 transparent content model support - block-level links #514

anand-s-ndaq opened this issue Jun 15, 2017 · 2 comments

Comments

@anand-s-ndaq
Copy link

@anand-s-ndaq anand-s-ndaq commented Jun 15, 2017

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

Other details

This behavior has been noted in stackover flow

  • Browser: Any
  • OS: Any
  • CKEditor version: 4.1+
  • Installed CKEditor plugins: default
@mlewand mlewand changed the title Support for HTML 5 compliant markup HTML 5 support Jun 16, 2017
@mlewand mlewand changed the title HTML 5 support HTML5 transparent content model support - block-level links Jun 16, 2017
@mlewand

This comment has been minimized.

Copy link
Member

@mlewand mlewand commented Jun 16, 2017

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

This comment has been minimized.

Copy link

@prob6 prob6 commented Sep 28, 2017

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
4 participants
You can’t perform that action at this time.