SharePoint 2013 Rich Text Editor

Question

I'm adding a responsive grid to the SP RTE and have added custom class names to several grids. When a user selects Styles (Page Elements, and Text Styles) from ribbon, the RTE is removing class names on parent elements.

Does anyone have any tips on improving this such that the RTE does not modify class names of parent (unselected) elements?

Thanks,

Matt

Answer 1

I added a duplicate attribute to the html element called data-classname.

A timer interval runs during edit and sets the class attribute equal to the data-classname.

Thus they stay in sync.

As we're using search to surface the data it's easy to strip the unrequired data-classname attribute before serving users.

Answer 2

I have found no solution with the out-of-the-box RTE that solves this issue, but instead I try to work around it. If the design allows, I always put web part zones or page content areas within grid elements and not allowing users to create grids. If grids are truly necessary, we provide reusable HTML content that can be inserted using custom ribbon actions, with styles already applied.