Overview
There are several places in the Enterprise Service Management (ESM) system which allow the entry of rich HTML content, usually via a WYSIWYG text editor called the CKEditor. This article includes details for adding in-page links, and styling tips to remove the underline from links.
This HTML content is supported in the Client Portal headers and footers, TDNext and TDClient login prompts, knowledge base articles, service catalog service and service offering entries, Questions and answers, and HTML desktop modules.
As this article will explain, not all HTML tags and syntax are supported by TeamDynamix.
In this article:
Understanding HTML Sanitization
Rich HTML content is sanitized when it is viewed in a page. Sanitizing means any HTML tags or syntax that are not supported by TeamDynamix are stripped out.
Sanitization happens on the pages where the rich content is displayed, not in the content editor. You may see unsupported HTML content appear in the editor, but it doesn’t appear in the published view of the page.
At this time, sanitization can can only be bypassed for HTML desktop models created by ESM administrators, there is no way to disable the sanitization in any of the other areas.
Supported HTML Tags
The following is a list of allowed HTML tags (i.e., between < and >) allowed in rich content. Anything outside of these lists will not display in saved content.
- a
- abbr
- acronym
- address
- area
- article
- aside
- b
- big
- blockquote
- br
- button
- caption
- center
- cite
- code
- col
- colgroup
- dd
- del
- dfn
- dir
- div
- dl
- dt
- em
- fieldset
- figcaption
- figure
- font
- footer
- h1
- h2
- h3
- h4
- h5
- h6
- header
- hr
- i
- img
- input
- ins
- kbd
- label
- legend
- li
- map
- mark
- nav
- ol
- optgroup
- option
- p
- pre
- q
- s
- samp
- section
- select
- small
- span
- strike
- strong
- sub
- sup
- table
- tbody
- td
- textarea
- tfoot
- th
- thead
- tr
- tt
- u
- ul
- var
- wbr
Image Size Restrictions and Resizing
Any images uploaded through the editor will be scaled down (with width as the constraint) if they exceed 900px in width. If you do not want your images to be scaled down, ensure that they are already 900px wide or smaller before uploading. After the image is uploaded, you may attempt to scale up the image for display using HTML width and height attributes and/or inline CSS styles for width and height.
Please note that the content viewing window in the client portal is restricted to 750px. While images at 900px and smaller will not be resized, they will appear to be squished into a 750px window. For best results, ensure that your images are no more than 750px wide with proper aspect ratios for a 750px width. In addition, the CKEditor tool will only allow a maximum image size of ~4MB to be uploaded to the server.
Note
Size restrictions are especially impactful for animated GIFs of any sort. If an animated GIF is resized automatically during upload, the resize process has to resave the image, which in turn removes all animations! Be sure that any animated GIFs you intend to use are 900px wide or smaller (and ideally less than 700px wide). This will prevent automatic image resizing and removal of animations.
Iframe Exception URIs
HTML iframes are selectively allowed if the source (src) attribute value starts with one of the following domains (www prefixes in the domain are allowed):
- http(s)://youtube.com/embed/
- http(s)://youtube-nocookie.com/embed/
- http(s)://player.vimeo.com/video/
- http(s)://dailymotion.com/embed/video/
- http(s)://google.com/maps/embed?
- http(s)://bing.com/maps/embed/
- http(s)://mapquest.com/embed?
- http(s)://archive.org/embed/
- http(s)://web.microsoftstream.com/embed/video/
Allowed HTML Attributes
The following is a list of HTML tag attributes that are allowed in rich content:
- abbr
- accept
- accept-charset
- accesskey
- align
- alt
- axis
- bgcolor
- border
- cellpadding
- cellspacing
- char
- charoff
- charset
- checked
- cite
- class
- clear
- cols
- colspan
- color
- compact
- coords
- datetime
- dir
- disabled
- enctype
- for
- frame
- headers
- height
- href
- hreflang
- hspace
- ismap
- label
- lang
- longdesc
- maxlength
- media
- multiple
- name
- nohref
- noshade
- nowrap
- prompt
- placeholder
- readonly
- rel
- rev
- rows
- rowspan
- rules
- scope
- selected
- shape
- size
- span
- src
- start
- style
- summary
- tabindex
- target
- title
- type
- usemap
- valign
- value
- vspace
- width
- scrolling
- frameborder
- marginheight
- marginwidth
- sandbox
- seamless
- allowfullscreen
- mozallowfullscreen
- webkitallowfullscreen
- data-slide-to
- data-ride
- data-slide
- data-target
- data-interval
- data-toggle
- data-target
Allowed CSS Properties
The following is a list of CSS properties allowed in style attributes in rich content:
- background
- background-attachment
- background-clip
- background-color
- background-image
- background-origin
- background-position
- background-repeat
- background-size
- border
- border-bottom
- border-bottom-color
- border-bottom-style
- border-bottom-width
- border-collapse
- border-color
- border-left
- border-left-color
- border-left-style
- border-left-width
- border-radius
- border-right
- border-right-color
- border-right-style
- border-right-width
- border-spacing
- border-style
- border-top
- border-top-color
- border-top-style
- border-top-width
- border-width
- box-shadow
- caption-side
- clear
- clip
- color
- content
- counter-increment
- counter-reset
- cursor
- direction
- display
- empty-cells
- float
- font
- font-family
- font-size
- font-style
- font-variant
- font-weight
- height
- letter-spacing
- line-break
- line-height
- list-style
- list-style-image
- list-style-position
- list-style-type
- margin
- margin-bottom
- margin-left
- margin-right
- margin-top
- max-height
- max-width
- min-height
- min-width
- opacity
- orphans
- outline
- outline-color
- outline-style
- outline-width
- overflow
- overflow-wrap
- overflow-x
- overflow-y
- padding
- padding-bottom
- padding-left
- padding-right
- padding-top
- page-break-after
- page-break-before
- page-break-inside
- quotes
- table-layout
- text-align
- text-align-last
- text-decoration
- text-indent
- text-overflow
- text-shadow
- text-transform
- unicode-bidi
- vertical-align
- visibility
- white-space
- widows
- width
- word-break
- word-spacing
- word-wrap
- columns
- -webkit-columns
- -moz-columns
Allowed Data URI MIME Types
The list of allowed MIME types that can be used in HTML elements with source (src) attributes, like images. See the following code sample for reference. The red and bolded portion is the MIME type being checked.
- image/jpeg
- image/pjpeg
- image/gif
- image/png
- image/tiff
- image/bmp
- image/svg+xml
Allowed URI Schemes
The following is a list of allowed URI schemes that can be used for HTML attribute values, typically for things like src or href attributes:
- http
- https
- ftp
- sftp
- ftps
- news
- mailto
- tel
Allowed URI Attributes
The following is a list of allowed HTML attributes which can contain URIs. This should not be confused with plain text inside of HTML tags, like the body of a p or div tag. Those can contain any sort of plain text value desired. This is specifically for HTML attributes of an HTML element itself:
Removing the Underline from Hyperlinks in Custom Content
As per WCAG 2.0 Guideline 1.4.1, hyperlinks in the ESM are underlined to make it clear to people who suffer from colorblindness that a hyperlink is present. Per UA's Accessibility policy all new web pages must comply with WCAG 2.1 Conformance Level AA., accordingly it is required to retain underlines on hyperlinks in order to improve accessibility.
Need additional help or have issues
For support, requests may be submitted anytime by Requesting Support for the Enterprise Service Management service. Support Requests are worked by Priority based on the Impact and Urgency of need as well as the order they are received by the IT Employees with the knowledge and permissions to assist with the request.
For immediate assistance please review the Contact Us page for ways to contact the appropriate support group.