Question

I’ve followed all the guidelines found at http://tinymcedeluxe.codeplex.com/

I’ve created the following ResourceManifest.cs file under my theme folder:

using Orchard.UI.Resources;

namespace TinyMceDeluxe {
    public class ResourceManifest : IResourceManifestProvider {
        public void BuildManifests(ResourceManifestBuilder builder) {
            var manifest = builder.Add();
            manifest.DefineScript("OrchardTinyMce")
                .SetUrl("orchard-tinymce.js")
                .SetDependencies("TinyMce")
                .SetVersion("3.4.8"); 
        }
    }
}

I’ve added the following line to my Layout.cshtml file:

Script.Require("OrchardTinyMce").AtFoot();

And I’ve copied the orcard.tinymce.js file to my theme’s script folder.

The correct files are loaded, as I can check using Firebug. The problem is that as soon as I uncomment any of the plugins to use, the TinyMCE editor commands simply disappear. For example:

////
//// Un-comment-out the tinymce.PluginManager.load commands for the plugins you want to use:
tinymce.PluginManager.load('advhr', '/Modules/TinyMceDeluxe/Scripts/plugins/advhr/editor_plugin.js');
//tinymce.PluginManager.load('advimage', '/Modules/TinyMceDeluxe/Scripts/plugins/advimage/editor_plugin.js');
//tinymce.PluginManager.load('advlink', '/Modules/TinyMceDeluxe/Scripts/plugins/advlink/editor_plugin.js');
//tinymce.PluginManager.load('advlist', '/Modules/TinyMceDeluxe/Scripts/plugins/advlist/editor_plugin.js');
...

If I uncomment the advhr plugin the TinyMCE editor does not show. If I comment it back again it shows perfectly. NOT A SINGLE PLUGIN WORKS. As soon as I uncomment one of them, even if I do not use it on the TinyMCE.init call, it doesn’t work. Even using the following init which is the standard one:

tinyMCE.init({
    theme: "advanced",
    mode: "specific_textareas",
    editor_selector: "tinymce",
    plugins: "fullscreen,autoresize,searchreplace,mediapicker",
    theme_advanced_toolbar_location: "top",
    theme_advanced_toolbar_align: "left",
    theme_advanced_buttons1: "search,replace,|,cut,copy,paste,|,undo,redo,|,mediapicker,|,link,unlink,charmap,emoticon,codeblock,|,bold,italic,|,numlist,bullist,formatselect,|,code,fullscreen",
    theme_advanced_buttons2: "",
    theme_advanced_buttons3: "",
    convert_urls: false,
    valid_elements: "*[*]",
    // shouldn't be needed due to the valid_elements setting, but TinyMCE would strip script.src without it.
    extended_valid_elements: "script[type|defer|src|language]"
});

I don’t know if I did anything wrong. I’ve downloaded the package and unzipped it, then I’ve copied the TinyMceDeluxe folder to the Orchard.Web\Modules folder. It now sits just bellow the standard TinyMce plugin folder. Then I’ve enabled it on the Modules admin UI. And created the ResourceManifest and copied and configured the orchard-tinymce.js file on my theme’s folder.

In desperation I’ve even deleted the ResourceManifest.cs file and the orchard-tinymce.js file from my theme’s folder and used everything under the TinyMceDeluxe module itself, but it still didn’t work.

Does anyone have any ideas why is this happening, and why it is so hard to use some basic tinyMce plugins in Orchard? I’ve never had trouble with it in WordPress :-(. Can I add everything by hand without using the modules? I would add it to my theme and try it out…

EDIT:

Giscard correctly answered that the culprit of the problem was the actual root path for my Orchard application. The loading of the plugins try to read them from the root, but when running the application inside Visual Studio Orchard normally runs it as if the root path was OrchardLocal. This creates a lot of problem, but they are necessary problems because if it didn’t run with a different root you would only notice the need to be aware of different roots when you deployed your site on a different environment, with a different root. So I had to add the root to all plugin loading like this:

//tinymce.PluginManager.load('advhr', '/modules/tinymcedeluxe/scripts/plugins/advhr/editor_plugin.js');
tinymce.PluginManager.load('advhr', '/orchardlocal/modules/tinymcedeluxe/scripts/plugins/advhr/editor_plugin.js');

Unfortunately adding this root prefix in a hardcoded fashion will not cut it because when deploying to a different server it will fail as the root will probably change.

I had to resort to a dirty JavaScript trick to resolve it. I’ve put the following JavaScript code inside the orchard-tinymce.js file:

// Getting the root of the site by inspecting the script tag that just loaded this script...

var scripts = document.getElementsByTagName("script");
var scriptTag = scripts[scripts.length - 1];
var scriptPath = scriptTag.getAttribute("src");
var idx = scriptPath.indexOf("/Modules");
var appPath = scriptPath.substring(0, idx);

Now appPath will hold the path for the root of our application.

Then all I had to do was to change the plugin loading code to this:

tinymce.PluginManager.load('table', appPath + '/modules/tinymcedeluxe/scripts/plugins/table/editor_plugin.js');

And it is working and hopefully will work with any root or even if the site is actually at the root (the appPath will return an empty string).

Answer 1

TinyMceDeluxe author here. By coincidence I just published a new version of the module a few minutes ago. I recommend you try out the new one (v1.0.1), as getting it working is easier than previous versions. It is now a replacement rather than an add-on to the default TinyMce module, so you simply disable TinyMce, and enable TinyMceDeluxe.

Starting with v1.0.1, you no longer need to touch resourcemanifest.cs, or override any views/scripts/etc.

TinyMceDeluxe goes into the Modules folder, as a sibling to TinyMce. Your modules folder will look like this:

modules/
    TinyMce/
    TinyMceDeluxe/

Then you customize /modules/tinymcedeluxe/scripts/orchard-tinymce.js. The one that’s there by default has bunch of info on what you can change.