Is there any way to disable the auto HTML clean up correction in the WYSIWYG?
We use Orbit for our slideshow (http://foundation.zurb.com/docs/orbit…), and it calls for using code inside an img tag that isn’t normally used (data-caption=""). Because of this, whenever we leave the code view of a Rich Text Widget, it removes this part of the HTML.
I thought of using an HTML widget for this, but we’d like to be able to see the pictures and change them out with the WYSIWYG since these will change out fairly often.
There is currently no way to disable HTML auto-formatting in the Rich Text editor. The configuration you’re using now is actually pretty creative, but the Rich Text widget really is not meant for this sort of application. An HTML widget would be your best bet to avoid the Rich Text editor’s inherit HTML auto-formatting. If you linked the slider up to image assets (using URLs such as: “/Assets/yoursite/folder/image1.jpg”), changing out your slider images would be as easy as double-clicking on the desired image asset through Finder, hitting Edit, and then selecting “Upload an Image.”
<!-- 5 Feature Images go here with corresponding values for the captions below -->
<!-- Captions go here -->
[GWU Graduate School Renamed Gayle Bolt Price School of Graduate Studies](http://gardner-webb.edu/newscenter/?p=2991)[GWU Graduate Surprised by Military Sons During
Ceremony](http://gardner-webb.edu/newscenter/?p=2980)[Gardner-Webb Awards Over 400 Degrees in Two Commencement Ceremonies](http://gardner-webb.edu/newscenter/?p=2948)[B.E.S.T. Program Provides High School Students Opportunity to Partner with Business Leaders](http://gardner-webb.edu/newscenter/?p=2922)[Changing lives: Gardner-Webb and The Tucker Family United for Common Goal](http://gardner-webb.edu/newscenter/?p=2909)
The reason these attributes are being cleaned is because we don’t have support for HTML 5 in the Rich Text editor at this time. The “data-” attribute is not supported until HTML 5 as a valid attribute and while this is allowed in the browser, it will cause validation issues when passed through a HTML validator recognizing the page is not HTML 5. To prevent that, the editor is set to prevent invalid attributes and tags from being added in. While HTML 5 attributes and elements are valid by web standards, we are still working to update the editor to allow all cases.
Because of this, I have come up with a possible work around for you involving some javascript, if you are okay with an alternative approach. Instead of adding the data attributes to the elements, you can add them as classes with a standard format. I looked at the markup you added here and saw that the same thing was being used on your live site, with different images, so I used that markup to test and confirm. For each data attribute, you simply add it as a hyphen separated class name on the element.
An example: Take note of the “class” attributes.
[GWU Professor Recalls Experience as Former
Olympian](http://gardner-webb.edu/newscenter/?p=3005)
[Gardner-Webb Students Spend Summer Changing
Children’s Lives](http://gardner-webb.edu/newscenter/?p=3019)```
The classes with "data-" prefixing them indicate a data attribute. The second piece indicates the attribute name, and the third piece is the value.
Follow this block with the following JavaScript. This will parse all "data-" prefixed class names and create "data-" attributes on the element with the name and value added to it.
``` $('#featured img').each(function() {
var classes = $(this).attr('class').split(' ');
for (var i=0;i<classes.length></classes.length> if (classes[i].indexOf('data') == 0) {
var vals = classes[i].split('-');
$(this).attr('data-'+vals[1],vals[2]);
$(this).removeClass(classes[i]);
}
}
}); ```
The final product of this action is the following:
We too are plagued by the auto correction. Empty div’s are removed. I can see why this would be done, but its also not invalid code as long as they are balanced. Sometimes it’s useful to have jquery perform operations on divs with a certain class or id, but the rich text editor removes them.
We are also using Bootstrap in places and the rich text editor is striping out unknown attributes from html tags. For example we have an attribute placeholder=“Search” on an input field, which gets removed.
I understand that an HTML widget would solve the problem, but the Bootstrap example above is in our main site navigation (1 shared asset) and needs to have managed links, which only the rich text editor has.
In CM1 2.10, we took a step forward with this by implementing a “do not harm” approach to certain known HTML5 tags. We are continuing to look into ways to improve the RTE’s intelligence when it comes to auto-correcting tags and attributes added to the source view, and I have forwarded the examples you outlined to our product management team.
On a related point, we are also looking to integrate the managed links feature with the HTML widget, which would incorporate one of the most powerful RTE features into an environment where your code remains untouched.
