MVC4 bundling with TinyMCE

Question

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?

score 32 · Answer 1 · answered Apr 22 '14 at 20:08

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>

answered Apr 22 '14 at 20:08

Codeacula

2,329
25
30

Does not work, the tinymce var is not initialized due to failed subsequent js file load – Patrick Peters Jun 02 '14 at 13:51
Failed subsequent js file load? If you're overwriting the tinymce var, then of course it won't work. – Codeacula Jun 03 '14 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 09 '14 at 17:08
1

This is the correct answer since it will also work with themes, languages files etc. – Dominique Alexandre Apr 22 '15 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 '16 at 13:25

score 16 · Accepted Answer · answered Apr 30 '13 at 14:41

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. Seems a bit raw at first look, but after examing all possible solutions, sounds like the most clean & intuitive. — T-moty, Apr 21 '16 at 13:20

bradlis7 · Answer 3 · 2015-02-06T22:11:45.190

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");

edited Feb 06 '15 at 22:11

answered Jan 22 '15 at 18:51

bradlis7

3,375
3
26
34

This worked well for me and is more consistent than pulling the TinyMCE script out of the normal bundling process. – Neilski May 20 '15 at 14:56
This did not work for me. It could not lot fr_FR.js nor theme.js – Jean-François Beauchamp May 07 '16 at 01: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 '18 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. – Philip Stratford Sep 16 '20 at 16:37

score 2 · Answer 4 · answered Jan 27 '20 at 15:19

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)

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.) — user3717478, May 15 '21 at 12:15

score 0 · Answer 5 · answered Oct 15 '15 at 11:22

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>
}

answered Oct 15 '15 at 11:22

Farouk Belhocine

37
3

did you read through the other answers why this is not a valid solution? – Ofer Zelig Mar 30 '16 at 00:46

MVC4 bundling with TinyMCE

5 Answers5