WYSIWYG Adding Inline Styles to Tables

Request Type:

Bug Fix

Author:

Michael Harris

Issue/Request:

When creating tables in WYSIWYGs, it’s possible to insert inline styles to tables (especially inadvertantly) that break the table, including fixed width, min width, etc. When a style is done inadvertantly, it can be difficult or impossible to reverse without editing the HTML in plaintext.

Text formats for tables allow all attributes to be inserted. (e.g. table[*], td[*]). Would it be feasible to change text formats / add an additional format where style attributes cannot be added to table elements?

Michael Harris on September 17, 2015:

I created a new text format, which I called “Table Friendly Filtered HTML”. It’s purpose is to prevent the WYSIWYG to adding inline styles to tables.

It’s essentially a clone of the “Filtered HTML” text format, but with the following definitions for allowed table fields (instead of table[*], etc):

(Also must enable CKEditor for this text format).

This workaround prevents tables from overflowing their container (tables will never be wider than 100%). This does not make tables completely responsive; sometimes it creates side scrolling.

Individual tables could be hit with styling via CSS Injector, as normal, or we could develop a sitewide CSS / JS solution in which we add a class to all tables to make them responsive.

See my dev site.

Josue Rodriguez on September 22, 2015:

I’ll escalate this for verification and implementation.

Michael Harris on September 22, 2015:

It may be worth considering disallowing inline styles for all wysiwyg items, not just this one. That would require a bit of a different approach. I’m happy to keep poking around with it.

Michael Harris on September 23, 2015:

I’ve updated the table styling to strip out any inline styles, and to permit the class “table-fix” to be added to elements. It’s new name is “No Styles HTML”.