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"

This has been answered [in this SO post](http://stackoverflow.com/a/15555201/1810243). You can't give your bundle a name that is also the name of an existing directory. — MikeSmithDev, Oct 30 '14 at 13:47

score 6 · Answer 1 · edited May 23 '17 at 12:31

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).

using the skin_url: sorted my issue. Thanks – Stuart Sep 26 '17 at 09:53 — Stuart, Sep 26 '17 at 09:53

score 1 · Answer 2 · answered Oct 29 '14 at 18:39

1

Change your bundle name to something other than an existing location on disk

For example: Bundle( "~/Scripts/tinymce") to Bundle( "~/js/tinymce")

answered Oct 29 '14 at 18:39

GvM

1,735
14
15

Unfortunately this does not work because TinyMCE needs to load a bunch of other resources. – Big McLargeHuge Oct 29 '14 at 19:07
2

Not too familiar with TinyMCE, but why wouldn't those resources be part of your bundle? – GvM Oct 29 '14 at 19:16
Kinda. See the answer I posted. I'm not really satisfied with it so let me know if you can think of a way to improve. – Big McLargeHuge Oct 30 '14 at 16:58

How can I use bundling with TinyMCE?

2 Answers2