Allowing unsafe HTML in articles

Have more questions? Submit a request

24 Comments

  • Nicole Nguyen

    If the i class is stripped, what is the workaround for using Font Awesome icons then?

    For example, if I add 

    <i class="fas fa-camera-retro"></i>

    It gets removed from the html in my article.

    1
  • Patrick Bosmans

    Hello Nicole,

    One of the features of WYSIWYG editors is that they will "clean up" HTML that they do not support. For example, <bold> is not supported with our WYSIWYG but <strong> is and thus bold tags are removed.

    I did some digging into this for you and currently, the WYSIWYG editor that we use in our help center does not support this tag, so at this time there is no workaround.

    I'm sorry I couldn't give you better news on this, but please let us know if there is anything else we can help with.

    Sincerely, 

    Patrick | Tier 1 Advocate 

    0
  • Tami Settergren

    Is there a workaround for centering <td> elements? I'd like my bullets to be centered, rather than left-aligned.

    0
  • Molly

    Hey Tami!

    So not all HTML would be supported in the editor, but I was able to use the following class with some success:


    It basically indented the list a bit as opposed to the left justification.

    Hope that's useful to you!

    1
  • Alexia Wolfhagen

    So... Font awesome is not supported?? How do i add icons then?

    1
  • Ruth Anthony

    I cant find the option to Display Unsafe Content under Settings. Can you please help?

    0
  • Nicole - Community Manager

    Hi Ruth - 

    Make certain that you are in the Guide Admin and not the settings for Support. You can toggle this using the four grey boxes in the upper right-hand corner of the screen. 

    From there, click the gear icon in the left-hand pane. This will take you into the settings. 

    Then, scroll down to the section titled "security" and you will see a box you can check next to "Display unsafe content." 

     

    0
  • Stephen Fusco

    Hey Alexia, 

    There are some "hacky" way to get Font Awesome to work, such as utilizing <div> or <p> tags instead of <i> tags. In some testing this seems to have worked but we cannot guarantee it as a workaround because as stated Font Awesome is not really supported in help center. 

    That said, there is a community post here which might help: https://support.zendesk.com/hc/en-us/community/posts/203458726-Help-Center-Adding-icons-into-your-theme 

    Wes also suggested another solution not using font awesome icons here: https://support.zendesk.com/hc/en-us/community/posts/211589848-Adding-category-images-to-the-Copenhagen-Theme

     

     

    1
  • Zachary

    Hello Zendesk team,

    New to Zendesk so bear with me. I'm trying to edit the source code of a particular article (specifically, I am trying to wrap a <p> element within <a> elements to make the entire piece clickable - which is pretty common), but the changes I make are getting stripped out. I assumed it has something to do with TinyMCE, but is there a way to prevent this? Is it only stripping in the preview and it will save in production?

    Any help would be appreciated.

    Thanks!

    0
  • Jessie Schutz

    Hey Zachary!

    Just to clarify, do you have unsafe HTML enabled in your Help Center? 

    I'm going to check with some of our Community Moderations to have them take a look for you.

    0
  • Zachary

    I do, yes. I'm also only using <p> and <a> elements, which are listed as safe. 

    I'm trying to change this:

    <p>Foo bar <a href="my-website" target="_blank">blog post</a>.</p>

    To this:

    <a href="my-website" target="_blank"><p>Foo bar blog post.</p></a>

    But each time I make the changes, the <a> elements are stripped out, which leaves just this:

    <p>Foo bar blog post.</p>

    Am I doing something wrong?

    1
  • Jessie Schutz

    Hey Zachary!

    Yeah, I don't have any insights to share on this. I'll ping the Moderators again to see if they can help!

    0
  • Jacob J Christensen

    Hi Zachary,

    This isn't really my area of expertise, but it looks to me like the <p> inside <a> element is not always allowed and some browsers are not handling it well, even when it is allowed.

    I'm just guessing, but maybe the editor is stripping it to prevent unwanted rendering.

    Is there a reason why you don't simply mark the entire content and use the editor to hyperlink everything?

    Hope I'm being helpful, otherwise just tell me off...

    0
  • Karen D Snyder

    I also have a problem with the article editor stripping an <a> element. I have an article that contains a link to a form, and I need it to be a clickable image with no text. I put the code below into the article (the <a> is inside a <div>):

    <a class="icon-training" href="/hc/en-us/requests/new?ticket_form_id=990000232572"></a>

    When I saved the article and then opened it again, the <a> element was gone. I figured out that the <a> isn't removed if it has text, so my workaround is that I put the following code in the article, and use jquery to remove text from any element with the remove-text class:

    <a class="icon-training remove-text" href="/hc/en-us/requests/new?ticket_form_id=990000232572">Training</a>

    This is very strange behavior, that the article editor removes any <a> element that doesn't have text. 

    0
  • Brett - Community Manager

    Hey Karen,

    It looks like this is actually expected behavior as mentioned in this article. The 3rd party article editor (TinyMCE) the Help Center uses may strip some safe tags from the HTML. This will include the <a> tag as you're experiencing on your end.

    Cheers!

    0
  • Karen D Snyder

    Hi Brett, what seems strange to me is that the article editor strips the <a> element if it contains no text, but doesn't strip it if it contains text. This seems more like a bug than expected behavior.

    0
  • Brett - Community Manager

    Hey Karen,

    I did some additional digging and it looks like in general if there's an empty tag it's removed. In this case your <a> tag is empty so TinyMCE removes it from the article editor. This external article on Stack Overflow mentions this as well: how to prevent tinymce from stripping empty tags from input?.

    Hope this information helps!

    0
  • Karen D Snyder

    Hi Brett, thanks for the Stack Overflow article. I used the suggested solution of putting &nbsp; in the <a> element, and then the article editor didn't strip the <a> element. Using the nbsp; is a much better workaround than putting in text that I had to remove with jquery.

    0
  • Brett - Community Manager

    Glad to hear it Karen :)

    That definitely seems like a much easier solution.

    Thanks for posting here for visibility!

    0
  • Karen D Snyder

    A small addendum to this: when I hovered over the link, the &nbsp appeared as a dash:So I had to use CSS with font-size: 0px to hide it. I couldn't use visibility or opacity to hide it, as that also affected the image that is displayed in the link.

    0
  • Brett - Community Manager

    Thanks again for sharing Karen :)

    0
  • ChrisT

    Any idea how to make my table bigger while I am viewing it and not while I am editing it? I've set my table width to 1000 but when I go to view it as normal user, the table is still small.

     

     

    This is in the editor

     

     

    And this is in normal view

     

    I understand that maybe this is happening because in the right side of the page there is the "recently viewed articles" area and maybe it prevents the table to become bigger. I am definitely not an html expert, so any advice would be appreciated.

     

    Thank you!

    0
  • Dan Ross

    Hey Chris,

    This looks like a CSS issue, but its really hard to figure out what needs adjusting without being able to see a live version of the page. Do you have a link to the help centre with this kind of issue on display?

    Thanks!

    0
  • ChrisT

    Thanks Dan! As a solution I removed the table and I put the images below the paragraphs. This solved the problem for now.

     

    Chris

    0

Please sign in to leave a comment.

Powered by Zendesk