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:

<audio autoplay controls loop src="audio.ogg">

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

Leave a comment

*
*