Early Bird Registration for DrupalCon Portland 2024 is open! Register by 23:59 PST on 31 March 2024, to get $100 off your ticket.
I saw a lot of issues about tags getting stripped from text, but I can't find any solution.
The text I want, and is as such in db, is this:
<div class="socials">
<p>Volg ons</p>
<ul class="social-list">
<li><a target="_blank" href="https://www.twitter.com/" title="Twitter"><i class="fa fa-twitter"></i></a></li>
<li><a target="_blank" href="https://www.facebook.com/" title="Facebook"><i class="fa fa-facebook"></i></a></li>
</ul>
</div>
On editing the custom block I get this:
<div class="socials">
<p>Volg ons</p>
<ul class="social-list">
<li> </li>
<li> </li>
</ul>
</div>
The used text format is Full HTML. The setting "Limit allowed HTML tags and correct faulty HTML" is off. So I assume no limits in allowed tags.
I hope I can get a working solution here. Thanks in advance.
Comments
Comment #2
Wim LeersHm… reproduced (but with a slightly different result, I'm assuming you just had a copy/paste error). Bizarre. This looks like a CKEditor bug.
Comment #3
Wim LeersComment #4
Wim LeersPinged the CKEditor folks about this.
Comment #5
Tade0 CreditAttribution: Tade0 at CKSource commentedIn most cases this problem can be solved by manipulating the Document Type Definition:
http://docs.ckeditor.com/#!/api/CKEDITOR.dtd-property-S-removeEmpty
If the content is a single, empty paragraph(or block element) CKEditor by default removes it. To disable this set the
ignoreAutoParagraph
config option tofalse
.http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-ignoreEmptyParagraph
Comment #6
Wim LeersIn other words, in the case of
<i>
, this is technically invalid. Right?This is for the case of
<div data-something></div>
or<custom-element data-something />
, right?Comment #7
Tade0 CreditAttribution: Tade0 at CKSource commentedThis is still valid HTML, but note how in this example you cannot place the selection at any of the bullet points.
Here's a list of tags that are removed this way: p,div,address,center,pre,h1,h2,h3,h4,h5,h6.
<custom-element></custom-element>
won't be removed by the DTD nor detected as an empty paragraph for removal.Comment #8
Wim LeersTry it at http://ckeditor.com/demo#full: paste
<custom-element></custom-element>
while in source mode, switch to non-source mode, switch back. It's gone.Comment #9
Tade0 CreditAttribution: Tade0 at CKSource commentedThat's right because in this example the ACF is enabled and filters out any non explicitly allowed content.
With the filter disabled the expected result is that if you have a
<custom-element></custom-element>
in the source it's going to get wrapped in a paragraph like this:Comment #10
Wim LeersYou're right, I confused two things. I'm sorry.
So, to go back to the original issue: to prevent
<i class="fa fa-twitter"></i>
from being stripped, Drupal would have to modify the DTD. But really, the problem is that it's questionable HTML. Let's look at https://developer.mozilla.org/en-US/docs/Web/HTML/Element/i:In the example given in the issue summary, there is no text range. So, the problem is wholly on the content author's side.
Conclusion + recommendation
<i class="fa fa-twitter"></i>
<i class="fa fa-twitter">Twitter</i>
You already have CSS to ensure that
i.fa-twitter
shows an icon. Just make that CSS hide the text too. Then you'll be fine.Comment #11
Wim LeersComment #12
HansKuiters CreditAttribution: HansKuiters commentedI agree with the conclusion and recommendation.
For future reference: changing the CSS like the commonly used {text-indent: -9999px;} should do the job.
Thanks Wim Leers and Tade0 for the effort in this.
Comment #13
Tade0 CreditAttribution: Tade0 at CKSource commentedI also agree with the conclusion and recommendation.
I found something interesting regarding this ticket:
http://fontawesome.io/icon/twitter/
Looking at the styles it seems that the
fa
class turns thedisplay
of the element toinline-block
.I guess the idea here was to have an icon that would fallback to a dimensionless element. I don't see why the mere fact that the stylesheet is unavailable should make it impossible to click that link, so for me it makes sense to put some fallback text there and hide it using CSS.
Comment #14
Wim LeersAwesome, everybody happy :)
Comment #15
wmad CreditAttribution: wmad as a volunteer commentedThanks for the hint guys. I wish we could make this more visible for the folks that want to use fontawesome. It took me a while to find this post and solve my issue. Perhaps in documentation so that it's easily found upon googling?
Comment #16
HansKuiters CreditAttribution: HansKuiters commentedWell, 'awesome' is mentioned a few times now at this page now, so search engines will pick it up in the right context I guess.
Comment #17
Wim LeersOr better yet, work with those projects that use incorrect HTML to fix their HTML.