How can I use bundling with TinyMCE?

Question

Internet Explorer has a fit when I try and render the minified TinyMCE bundle. So, in order to create a bundle that avoids minification, I followed these instructions to set up a "generic" or "basic" bundle in my BundleConfig:

bundles.Add( new Bundle( "~/Scripts/tinymce" )
                 .Include( "~/Scripts/tinymce/tinymce.min.js",
                            "~/Scripts/tinymce/jquery.tinymce.min.js" ) );

How do I render this on the page? None of the following seem to work:

@Bundles.Render( "~/Scripts/tinymce" )
@Bundle.Render( "~/Scripts/tinymce" )
@Bundle( "~/Scripts/tinymce" )

This renders the tag at least:

@Scripts.Render( "~/Scripts/tinymce" )

But it throws a 403 error when it tries to load the file:

"NetworkError: 403 Forbidden - http://localhost:1062/Scripts/tinymce/?v=MTojK5ORvAZmonNqNGJ3aWhOYyor-Fa8dZHTqfSOlUM1"

Answer 1

As pointed out in the comments, this question addresses part of the issue. Since you can't give your bundle a name that is also the name of an existing directory, I renamed it:

bundles.Add( new Bundle( "~/js/tinymce" )
                 .Include( "~/Scripts/tinymce/tinymce.min.js",
                            "~/Scripts/tinymce/jquery.tinymce.min.js" ) );

However, due to the way TinyMCE dynamically loads dependencies (plugin and theme files) I have to make sure all of that is included in the bundle as well:

bundles.Add( new Bundle( "~/js/tinymce" )
                 .Include( "~/Scripts/tinymce/tinymce.min.js",
                           "~/Scripts/tinymce/jquery.tinymce.min.js",
                           "~/Scripts/tinymce/plugins/autoresize/plugin.min.js",
                           "~/Scripts/tinymce/plugins/charmap/plugin.min.js",
                           "~/Scripts/tinymce/plugins/code/plugin.min.js",
                           "~/Scripts/tinymce/plugins/image/plugin.min.js",
                           "~/Scripts/tinymce/plugins/table/plugin.min.js",
                           "~/Scripts/tinymce/plugins/textcolor/plugin.min.js",
                           "~/Scripts/tinymce/themes/modern/theme.min.js") );

This means that if I wanted a new plugin it would require a code change and redeployment of bin files instead of a simple script update. However, the requirement for this application hasn't changed and probably won't any time soon (plus, it's an internal app), so this isn't really a problem.

Finally, TinyMCE also dynamically loads skin files (css, images and fonts). I can fix this by changing the TinyMCE configuration to specify the skin directory:

$('.tinymce').tinymce({
    skin_url: '/Scripts/tinymce/skins/lightgray',
    // other stuff...
});

I tried creating a bundle for the theme files:

bundles.Add( new Bundle( "~/css/tinymce" )
                 .Include( "~/Scripts/tinymce/skins/lightgray/*.css" ) );

And changing my configuration like so:

$('.tinymce').tinymce({
    skin_url: '/css/tinymce',
    // blah blah blah...
});

But, because TinyMCE looks for individual files, this did not work. It threw 404 errors for skin.min.css and content.min.css.

So now I have some of the TinyMCE files bundled, but not all of them. This is at least better than what I had before (separate HTTP requests for every single file).