JCE is corrupting my SlideShowPro text when saved

I am using Joomla for my websites and I have added SlideShowPro to multiple websites with success.

However for some reason when I add the extension to one of my particular sites, something is going wrong.

I'm using JCE and under Editor Parameters > Advanced, I have all of the following turned on:

Allow Javascript
Allow CSS
Allow PHP XHTML Inline Scripts

Under the tab Plugin Parameters then Media Support, I have all of the following turned off:

Strict XHTML Flash
Allow HTML5 Audio
Allow HTML5 Video
Allow OBJECT Elements
Allow EMBED Elements
and Allow Iframes

When I add the following code:

<!-- START EMBED CODE -->

<script type="text/javascript" src="http://www.colmandesigns.co.nz/colmangallery/m/embed.js"></script>

<div id="album-6">

</div>

<script type="text/javascript">
SlideShowPro({
attributes: {
id: "album-6",
width: 550,
height: 400
},
mobile: {
auto: false
},
params: {
bgcolor: "#000000",
allowfullscreen: true
},
flashvars: {
xmlFilePath: "http://www.colmandesigns.co.nz/colmangallery/images.php?album=6",
paramXMLPath: "http://www.colmandesigns.co.nz/colmangallery/m/params/chrome.xml",
contentScale: "Crop to Fit All"
}
});
</script>

<!-- END EMBED CODE -->

It ends up coming out like this once I click save:

<!-- START EMBED CODE -->
<p>
<s-cript type="text/j-avascript" src="http://www.colmandesigns.co.nz/colmangallery/m/embed.js"></s-cript>
</p>
<div id="album-6">&nbsp;</div>
<p>
<s-cript type="text/j-avascript"> SlideShowPro({ attributes: { id: "album-6", width: 550, height: 400 }, mobile: { auto: false }, params: { bgcolor: "#000000", allowfullscreen: true }, flashvars: { xmlFilePath: "http://www.colmandesigns.co.nz/colmangallery/images.php?album=6", paramXMLPath: "http://www.colmandesigns.co.nz/colmangallery/m/params/chrome.xml", contentScale: "Crop to Fit All" } }); 
<!-- END EMBED CODE -->
</s-cript>
</p>
<p>&nbsp;</p>

What do I need to do differently?

Solution

Yes, WYSIWYG editors will mess your embedded scripts and styles. What I do on my sites is configure JCE to not appear by default.

Go to "Components > JCE Editor > Profiles > Default > Features and Layout > Editor State" and set it to "Off".

This will give you a generic text area for editing your articles (by default) and a link to turn on WYSIWYG editing. This way it will not mess up your JavaScript / CSS.

You can also try "Flexi Custom Code" module, which works similarly to "Custom HTML" module but is intended to be used for JS / CSS instead.

Good luck.