Content preferences that interfere with WYSIWYG functions

Issue

Cascade's Content preferences include a "Remove all font tags and style attributes from word processor content" preference which removes all "font" tags and "style" attributes from WYSIWYG content when it is submitted. This preference is used to cleanup junk content that may makes its way from old HTML pages or from copy/pasting form Word. This cleanup is only done when the Tidy HTML checkbox is checked upon submission. We have a separate preference in the Content tab that controls whether this checkbox is checked by default: "Enable HTML Tidy by default"

Unfortunately, If this option is enabled, it will render certain functions like "Underline" ineffective. The style will be applied in the WYSIWYG, but stripped upon submission of the Edit. Similarly, the "Font Assignment" Content preference is not togglable unless that preference is disabled.

Affected WYSIWYG Functions

The WYSIWYG editor uses <span> tags with inline styles for some of its formatting and font assignment functions. This is the modern way to implement these functions as it relegates the look and feel to the CSS level where it belongs.

• Strikethrough - the strikethrough function wraps the selected text <span> tags with a "style" attribute style="text-decoration: line-through;" or adds the "style" attribute to a <span> tag if one already exists.
• Underline - the underline function wraps the selected text in <span> tags with a "style" attribute style="text-decoration: underline;" or adds the "style" attribute to a <span> tag if one already exists.
• Align [left|center|right|full] - the align functions wrap the selected text in <span> tags with a "style" attribute style="text-align: [left|center|right|justify];" or add the "style" attribute to a <span> tag if one already exists.
• Indent/Outdent - the indent functions wraps the selected text in <span> tags with a "style" attribute style="padding-left=30px;" or add the "style" attribute to a <span> tag if one already exists or adds more padding if already indented. Outdent simply removes the style or reduces the amount of padding.
• Table Properties - the following table properties are applied with inline "style" attributes
  • cell width - adds an inline "width" style on the <table> element (e.g. width: 25px;)
  • border color and width - add an inline "border" style on the <table> element (e.g. border: 0px solid #4b9cb3;) and a "border" attribute on the <table> element.
  • height - adds as an inline "height" style on the <table> element (e.g. height: 10px;)
  • background image - adds an inline "background-image" style on the <table> element (e.g. background-image: url(http://cascade_url/images/my.jpg);)
  • style - allows users to manually specify a "style" attribute on the <table> element
• Font Family - the font family is implemented by wrapping the selected text in a <span> tag with a style="font-family: font1, font2;" attribute or by adding the "style" attribute to a <span> tag if one already exists.
• Font Size - the font size is implemented by wrapping the selected text in a <span> tag with a style="font-size: {medium,small,x-small,etc.};" attribute or by adding the "style" attribute to a <span> tag if one already exists.

Recommendation

Our recommendation is that if you choose to enable the "Remove font tags and style attributes" preference, you should also:

1. Enable the "Disable table controls" WYSIWYG Content preference
   
2. Disable the "Text formatting" WYSIWYG Content preference

NOTES:

• The "Font Assignment" preference which controls the font family/size, text color, text background controls is automatically disabled if "Remove all font tags and style attributes" is enabled.
• Unfortunately at this time, the Align and Indent/Outdent controls will still appear and be ineffective.

Also, consider if you really need to remove all "font" tags and "style" attributes.