29

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?

5 Answers 5

32

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>
5
  • Does not work, the tinymce var is not initialized due to failed subsequent js file load Jun 2, 2014 at 13:51
  • Failed subsequent js file load? If you're overwriting the tinymce var, then of course it won't work.
    – Codeacula
    Jun 3, 2014 at 14:52
  • @PatrickPeters: I ran into this issue on a second website unrelated to what I was working on in the example, did the fix I suggested, and it worked there, too. If you're over-writing the tinymce stuff, then the fault lies in your coding and not the answer.
    – Codeacula
    Jul 9, 2014 at 17:08
  • 1
    This is the correct answer since it will also work with themes, languages files etc. Apr 22, 2015 at 18:24
  • Consider that will work only on in-page scripts. External js can't use razor API, then you should persist that URL in an hidden field or unobtrusive attribute. Yes, it should works, but is quite unclear.
    – T-moty
    Apr 21, 2016 at 13:25
16

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.

1
  • +1. Seems a bit raw at first look, but after examing all possible solutions, sounds like the most clean & intuitive.
    – T-moty
    Apr 21, 2016 at 13:20
11

@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");
4
  • This worked well for me and is more consistent than pulling the TinyMCE script out of the normal bundling process.
    – Neilski
    May 20, 2015 at 14:56
  • This did not work for me. It could not lot fr_FR.js nor theme.js May 7, 2016 at 1:10
  • I prefer this solution because I was bundling several other related scripts with TinyMCE into it's own bundle. Note that the ".min" part of the bundle path is what triggers TinyMCE to load ".min" versions of it's dynamic resources (plugins and styles). This solution addresses a problem that setting the basePath alone won't.
    – davesw
    Oct 17, 2018 at 19:03
  • I've wasted a couple of hours on this problem this afternoon and your solution as presented here is very like one I tried. The reason it didn't work for me, and why I ultimately ended up just abandoning bundling for TinyMCE altogether, is that its file structure includes the .css files in amongst the .js files, and trying to get that working just didn't seem worth wasting any more time on. Sep 16, 2020 at 16:37
2

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)

1
  • Nice idea but it didn't work with TinyMCE version 5.8.0. I encountered an exception during the minification process. I guess there is something in one of those js files that the minifier can't handle. (Using Visual Studio 2017.) May 15, 2021 at 12:15
0

In my case i do the following to resolve : Ignore the bundling and reference directely the minified version of the plugin.

@section scripts
{
    @Scripts.Render("~/bundles/ajax")
    @Scripts.Render("~/bundles/jqueryval")
    <script src="~/Scripts/tinymce/tinymce.min.js"></script>
}
1
  • did you read through the other answers why this is not a valid solution?
    – Ofer Zelig
    Mar 30, 2016 at 0:46

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.