I am using HTML tags in CKEditor which are not supported by every browser yet. Eg. the <details> and <summary> elements. When I put a block element such as a <div> inside it in the source view of CKEditor, it moves it outside of the <summary> element while having the "Correct faulty and chopped off HTML" option disabled for the current input filter. It would be nice to have the possibility to edit the source of a WYSIWYG without limitations. Especially because this is not invalid HTML. The ACF plugin should be disabled in that case.

Might be related to #2615852: Clean-up to our plugins that CKEditor >=4.5.5 enables

Comments

Lukas von Blarer created an issue. See original summary.

luksak’s picture

luksak
he/him
commented
Issue summary: View changes
wim leers’s picture

wim leers
Location Ghent 🇧🇪🇪🇺
commented
Issue summary: View changes
wim leers’s picture

wim leers
Location Ghent 🇧🇪🇪🇺
commented
Issue summary: View changes
wim leers’s picture

wim leers
Location Ghent 🇧🇪🇪🇺
commented
Category: Task » Support request
Status: Active » Fixed

It's the Limit allowed HTML tags and correct faulty HTML filter that matters, not Correct faulty and chopped off HTML.

In other words: the <details> and <summary elements are not allowed by the settings you have for your Limit allowed HTML tags and correct faulty HTML filter.

To prove this, I tried entering <details>test</details> using the Full HTML text format, and that worked fine.

P.S.: also, alarm bells are ringing in my head if the end user is allowed to submit such HTML. I wonder what you're trying to do? :)

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.

luksak’s picture

luksak
he/him
commented
Status: Closed (fixed) » Active

Sorry, I somehow forgot to reply here. You are right.

I realized that the issue must be something with CKEditor trying to fix having block elements inside the element. Pasting this markup and toggling CKEditor does this:

before:

<details>
	<summary>
		<div>summary</div>
	</summary>
	<div>content</div>
</details>

after:

<details><summary></summary>

<div>summary</div>

<div>content</div>
</details>
wim leers’s picture

wim leers
Location Ghent 🇧🇪🇪🇺
commented
Title: CKEditor cleans up code even if "Correct faulty and chopped off HTML" is disabled » CKEditor does not handle <summary> tag correctly
Category: Support request » Bug report
Priority: Normal » Minor
Status: Active » Postponed
Issue tags: +Needs upstream bugfix

Thanks, now I was able to reproduce this!

This is indeed a bug in CKEditor. I've reported it upstream: http://dev.ckeditor.com/ticket/14415.

However, I consider this very low priority, because I think less than 1% of sites want to use <summary> in CKEditor/text fields.

wim leers’s picture

wim leers
Location Ghent 🇧🇪🇪🇺
commented
Status: Postponed » Closed (works as designed)
Issue tags: -Needs upstream bugfix

The CKEditor guys replied:

According to spec: ​https://www.w3.org/TR/html-markup/summary.html#summary or ​https://html.spec.whatwg.org/multipage/forms.html#the-summary-element, the summary element may only contain Phrasing Content or Phrasing and Heading Conent.

Div is part of the Flow content so the editor behaviour is correct in this case. Disallowed content is removed from the tag.

Therefore this is actually working correctly.

luksak’s picture

luksak
he/him
commented
Status: Closed (works as designed) » Active

Ok, I agree that this is not a use case a lot of sites have and the markup might even be invalid. Still I find it very annoying when WYSIWG editors change markup.

I actually changed my markup to use <span> instead of <div> inside <summary> to fix this. I also have the entity_embed module installed. I placed an image inside the <summary> tag. The output of this is a <img> tag inside the <summary> which is valid HTML. But CKEditor does the same change to the markup as it does with the <div>.

Is there no way to completely disable this behavior?

wim leers’s picture

wim leers
Location Ghent 🇧🇪🇪🇺
commented
Status: Active » Postponed (maintainer needs more info)

Can you again post before vs. after markup examples like you did in #7? That makes reproducing this a hundred times easier :)

luksak’s picture

luksak
he/him
commented
Status: Postponed (maintainer needs more info) » Active

Of course, sorry for that. Here is my actual markup.

Before:

<details class="team">
    <summary class="team__summary">
<span class="team__summary-wrapper">
    <div class="team__summary-image">
    <drupal-entity alt="Test" data-align="none" data-embed-button="file"
                   data-entity-embed-display="image:image"
                   data-entity-id="6" data-entity-label="File" data-entity-type="file"
                   data-entity-uuid="d307bbdd-21cd-4170-9500-e13c34fe4591" title=""></drupal-entity></div>
     <span class="team__summary-title">Title</span>
    </summary>
    <div class="team__content details-wrapper">
        <p>Text</p>
    </div>
</details>

After:

<details class="team"><summary class="team__summary"> <span class="team__summary-wrapper"> </span></summary>

<div class="team__summary-image"><span class="team__summary-wrapper"><drupal-entity alt="Test" data-align="none" data-embed-button="file" data-entity-embed-display="image:image" data-entity-id="6" data-entity-label="File" data-entity-type="file" data-entity-uuid="d307bbdd-21cd-4170-9500-e13c34fe4591" title=""></drupal-entity></span></div>
<span class="team__summary-wrapper"> <span class="team__summary-title">Title</span> </span>

<div class="team__content details-wrapper">
<p>Text</p>
</div>
</details>
wim leers’s picture

wim leers
Location Ghent 🇧🇪🇪🇺
commented
Status: Active » Closed (works as designed)

Well, I'm sorry, but I'm afraid the markup you pasted is full of bugs:

  1. <span class="team__summary-wrapper"> is not closed
  2. You still have <div class="team__summary-image"> inside the <summary>, which means it's still violating the spec, and also means #10 is not true (where you said I actually changed my markup to use <span> instead of <div> inside <summary> to fix this.).
  3. I happen to know that <drupal-entity> is not yet registered with CKEditor's DTD, which means CKEditor doesn't know how to treat it correctly. This is a bug in the entity_embed module.

If I fix the markup and simulate <drupal-entity> being registered with CKEditor's DTD correctly, then it works:

Input
<details class="team">
    <summary class="team__summary">
<span class="team__summary-wrapper"><img src="" /></span>
     <span class="team__summary-title">Title</span>
    </summary>
    <div class="team__content details-wrapper">
        <p>Text</p>
    </div>
</details>
Output
<details class="team"><summary class="team__summary"> <span class="team__summary-wrapper"><img src="" /></span> <span class="team__summary-title">Title</span> </summary>

<div class="team__content details-wrapper">
<p>Text</p>
</div>
</details>
luksak’s picture

luksak
he/him
commented

Ok, I am sorry for the false bug report. I will fix my markup and see if it works.