Search code examples
asp.net-mvc-4tinymcebundle

MVC4 bundling with TinyMCE


I have an problem using MVC4 Bundling together with TinyMCE. I get this error:

    GET http://localhost:54717/Admin/EditText//langs/da.js 404 (Not Found) Site:1
    GET http://localhost:54717/Admin/EditText//plugins/lists/editor_plugin.js 404 (Not Found) Site:1
    GET http://localhost:54717/Admin/EditText//plugins/autolink/editor_plugin.js 404 (Not Found) Site:1
    GET http://localhost:54717/Admin/EditText//themes/advanced/editor_template.js 404 (Not Found) Site:1
    GET http://localhost:54717/Admin/EditText//plugins/spellchecker/editor_plugin.js 404 (Not Found) Site:1
    GET http://localhost:54717/Admin/EditText//plugins/pagebreak/editor_plugin.js 404 (Not Found) Site:1
    GET http://localhost:54717/Admin/EditText//plugins/style/editor_plugin.js 404 (Not Found) Site:1
    GET http://localhost:54717/Admin/EditText//plugins/table/editor_plugin.js 404 (Not Found) Site:1
    GET http://localhost:54717/Admin/EditText//plugins/layer/editor_plugin.js 404 (Not Found) Site:1
    GET http://localhost:54717/Admin/EditText//plugins/save/editor_plugin.js 404 (Not Found)
Failed to load: http://localhost:54717/Admin/EditText//langs/da.js 

The code looks like this( In BundleConfig.cs)

bundles.Add(
      new ScriptBundle("~/Scripts/Site").Include(
        "~/Scripts/jquery-1.9.1.js",
        "~/Scripts/tinymce/tiny_mce.js",
         "~/Scripts/jquery-ui-1.10.1.js",
        "~/Scripts/jquery.ui.slider.js",
        "~/Scripts/oline.Base.js",
        "~/Scripts/Validate/Language/jquery.validationEngine-da.js",
        "~/Scripts/Validate/jquery.validationEngine.js",
        "~/Scripts/jquery.ui.effect-blind.js",
        "~/Scripts/jquery.placeholder.min.js"));

      BundleTable.EnableOptimizations = true; 

And in the layout:

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

But if i remove the the tiny_mce.js form the bundling and place it like so <script src="~/Scripts/tinymce/tiny_mce.js"></script> it works just fine. Is it because i need to override the automatic loading by tinymce and place do it manually?


Solution

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