Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I use bundling with TinyMCE?

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"
like image 944
Big McLargeHuge Avatar asked Oct 29 '14 17:10

Big McLargeHuge


People also ask

Is TinyMCE an API?

The TinyMCE API is available publicly (versus privately, which is beyond the scope of this post) and you can use it to form functions that help customers and clients.


1 Answers

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

like image 137
Big McLargeHuge Avatar answered Nov 28 '22 21:11

Big McLargeHuge