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?

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
    Jul 10 '18 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
    Jul 11 '18 at 14:51
  • i think it's the wysiwyg
    – aydow
    Jul 11 '18 at 23:04
  • After playing around with this further, only an empty <span> is removed
    – aydow
    Jul 12 '18 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, privacy policy and cookie policy

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