HTML5 in Rich Text Assets
Percussion has a "do no harm" approach to HTML5 tag support in the Rich Text Editor. What this means is that in the rich text editor, the user can switch to source view in order to add HTML5 tags and attributes. Upon switching back to WYSIWYG mode, these attributes will be retained, though there is no way to edit them through the WYSIWYG view. Unfortunately, there are select tags and attributes that are problematic in the current release and will be addressed in a future release of CM1.
Known Issues
Attributes without values
Any time you are using an attribute on a tag, you must give that attribute a value or else the editor will strip out the attributes. For example, if the following <audio> tag were entered into the source view, this would be retained when switching to WYSIWYG mode.
<audio autoplay="true" controls="true" loop="true" src="audio.ogg">
However, for any attribute where a value is not entered, it will strip those attributes out. For example:
would be converted to
<audio src="audio.ogg">
This is true for any HTML5 tag.
Supported HTML5 tags:
- <article>
- <aside>
- <audio>
- <bdi>
- <canvas>
- <comand>
- <data>
- <datalist>
- <details>
- <dialog>
- <embed>
- <figcaption>
- <figure>
- <footer>
- <header>
- <hgroup>
- <keygen>
- <mark>
- <meter>
- <nav>
- <object>
- <output>
- <progress>
- <rp>
- <ruby>
- <section>
- <source>
- <summary>
- <time>
- <track>
- <video>
- <wbr>
Supported HTML 5 attributes
- New allowed attributes for <a> and <area> elements:
- download
- hreflang
- media
- ping
- rel
- type
- <input> element allows the following attributes:
- autocomplete
- autofocus
- dirname
- height
- form
- formaction
- formenctype
- formmethod
- formnovalidate
- formtarget
- inputmode
- list
- max
- min
- multiple
- pattern
- placeholder
- required
Note, the "required" attribute must have a value. - step
- width
- <textarea> element allows the following attributes:
- autofocus
- dirname
- form
- inputmode
- maxlength
- placeholder
- required
Note, the "required" attribute must have a value. - wrap
- <output> element allows the following attributes:
- form
- <label> element allows the following attributes:
- form
- <fieldset> element allows the following attributes:
- name
- form
- <form> element allows the following attributes:
- novalidate
- <button> element allows the following attributes:
- autofocus
- form
- formaction
- formenctype
- formmethod
- formnovalidate
- formtarget
- <select> allows the following new attributes:
- autofocus
- form
- required
Note: the "required" attribute must have a value.
- <menu> element allows the following attributes:
- type
- label
- <ol> element allows the following attributes:
- reversed
- <img> element allows the following attributes:
- crossorigin
- srcset
Unsupported HTML5 tags
The following HTML 5 tags are not supported
- <rt>
<rt> tags are stripped from the source - <time>
<time> tags are stripped from the source - <script>
User can enter <script> tag into Rich Text Editor. However, the system will add additional <!CDATA[ ...]]>
around the content of the <script>. For example, enter:<script> document.write("Hello World!") </script>
After saved above, switch to source mode, it becomes:
<div class="rxbodyfield"> <script>// <![CDATA[ /*<![CDATA[*/ // <![CDATA[ /*<![CDATA[*/ // <![CDATA[ document.write("Hello World!") // /**/ // /**/ // ]]> </script> </div>
Unsupported HTML 5 attributes
The following "global attributes" will not be supported
- aria-*
- data-*
- "disabled" attribute for <fieldset> tag
<fieldset> tag is supported, except the "disabled" attribute will be stripped out when switch between WYSIWYG and source mode