MVC4 bundling with TinyMCE

@Codeacula had a good solution, but another method is to put the bundle path relative to the TinyMCE folder.

Note that you have to pull it out of the main Script bundle to make this work, but as I'm not using TinyMCE on every page, there's no sense in adding it to the main bundle. Also, I used .min.js as the extension because it loads plugins based on the master file extension, and I don't have anything but .min.js files in my plugins folder.

var tinymce = new ScriptBundle("~/Scripts/tinymce/tinymce-bundle.min.js")
    .Include("~/Scripts/tinymce/tinymce.min.js");
bundles.Add(tinymce);

On your pages where TinyMCE is needed:

@Scripts.Render("~/Scripts/tinymce/tinymce-bundle.min.js");

Just ran into this today too. It seems that when tinymce is bundled, it cannot locate other dependent scripts (plugins, editor template, etc).

Since TinyMCE already comes minified, I solved this just by excluding it from the bundle and loading it separately. Something like this:

@* include tinymce unbundled so it can find its plugins and other scripts internally when bundles are optimized *@
@if (BundleTable.EnableOptimizations)
{
    <script type="text/javascript" src="~/scripts/tinymce/tiny_mce.js"></script>
}
else
{
    <script type="text/javascript" src="~/scripts/tinymce/tiny_mce_src.js"></script>
}

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

This way, you are still using the pre-minified version when optimizations are enabled, and the raw source code while debugging. It does end up with more than one request being sent by the browser though.


Ressing a long dead post I know, but, since I stumbled upon this issue myself just today, I thought of dropping in my 2 cents.

The above accepted and/or approved answers are good and everything but they didn't turn off my thirst for not having the overhead for multiple connections to the server in order to download all the js required for the tinyMCE to work while the tinymce(.min).js is requesting them.

Since I got to see that there actually is a javascript loader inside the main js file which is downloading required scripts only if the variables (in them declared) are not already defined, I thought of including the whole .js set in one bundle so that when you call the .init function scripts download will not be required. Something like:

bundles.Add(new ScriptBundle("~/Scripts/tinymce/bundledTinyMCE").IncludeDirectory("~/Scripts/tinymce", "*.js", true));

Assuming your tinyMCE sits in the folder ~/Scripts/tinymce.

No further late scripts download will be fired and your tinyMCE js will be minified AND bundled (while in Release configuration)


Before calling tinymce.init, do the following:

tinymce.baseURL = "@Url.Content("~/Scripts/tinymce")";

Or wherever your scripts are kept.

I had this same issue. This is my working final product

    <script>
    tinymce.baseURL = "@Url.Content("~/Scripts/tinymce")";

    // tinyMCE setup
    tinymce.init({
        selector: "textarea.rt-edit",
        browser_spellcheck: true,
        menubar: false,
        plugins: "paste,preview,code,textcolor,link",
        invalid_elements: "script",

        // Theme options - button# indicated the row# only
        toolbar1: "bold italic underline strikethrough subscript superscript link | fontselect fontsizeselect forecolor backcolor | justifyleft justifycenter justifyright cut copy paste pastetext pasteword| outdent indent | undo redo | code preview ",

    });
</script>