0

I'm using CKEditor in Drupal 8 and the client wants to write HTML that contains embedded tags like so

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
  <div class="menu-toggle-icon"></div>
</button>

Unfortunately, Drupal ends up mangling the code to something like this

<button aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-target="#navbarSupportedContent" data-toggle="collapse" type="button"></button>

<div class="menu-toggle-icon">&nbsp;</div>
<button aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-target="#navbarSupportedContent" data-toggle="collapse" type="button"></button>

I think this is in an attempt to prevent XSS but I'm not totally sure.

Should I be able to allow the user to embed tags? If so, how could I go about doing this?

2 Answers 2

1

The W3C specs (https://www.w3.org/TR/2011/WD-html5-20110525/the-button-element.html#the-button-element) show that a button allows phrasing content (https://www.w3.org/TR/2011/WD-html5-20110525/content-models.html#phrasing-content), e.g. a <span> to be placed inside a <button>, but not a <div>, so your WYSIWYG editor is correctly rearranging the elements.

Perhaps you could rework your code to allow for a <span> to be used inside the <button> and style that instead.

4
  • Thanks for your suggestion. I have tried using span, but the editor totally removes it
    – aydow
    Commented Jul 10, 2018 at 23:57
  • Is it being removed by the WYSIWYG editor or the text filter being used in Drupal? Are you getting no contents of the button being output?
    – kiwimind
    Commented Jul 11, 2018 at 14:51
  • i think it's the wysiwyg
    – aydow
    Commented Jul 11, 2018 at 23:04
  • After playing around with this further, only an empty <span> is removed
    – aydow
    Commented Jul 12, 2018 at 0:03
0

Answering my own question here. CKEditor will not allow for incorrect HTML as per this GitHub pull request found in this forum.

I.e.

<button>
  <div></div>
</button>

Will always be reformatted.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.