如何在Orchard TinyMCEDeluxe中启用TinyMCE插件

时间:2012-10-13 20:37:01

标签: tinymce orchardcms

我已按照http://tinymcedeluxe.codeplex.com/

中的所有指南进行操作

我在我的主题文件夹下创建了以下ResourceManifest.cs文件:

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

我在Layout.cshtml文件中添加了以下行:

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

我已将orcard.tinymce.js文件复制到我主题的脚本文件夹中。

正在加载正确的文件,因为我可以使用Firebug进行检查。问题是,只要我取消注释要使用的任何插件,TinyMCE编辑器命令就会消失。例如:

////
//// 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');
...

如果我取消注释了advhr插件,则TinyMCE编辑器不会显示。如果我再次对它进行评论,那就完全显示了。不是一个单一的插件工作。一旦我取消注释其中一个,即使我不在TinyMCE.init调用上使用它,它也不起作用。即使使用以下标准的init:

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

我不知道我做错了什么。我已经下载了包并解压缩,然后我将TinyMceDeluxe文件夹复制到Orchard.Web \ Modules文件夹中。它现在只是标准的TinyMce插件文件夹。然后我在Modules管理界面上启用了它。并创建了ResourceManifest并在我的主题文件夹中复制并配置了orchard-tinymce.js文件。

在绝望中我甚至从我的主题文件夹中删除了ResourceManifest.cs文件和orchard-tinymce.js文件,并使用了TinyMceDeluxe模块本身下的所有内容,但它仍然无效。

有没有人有任何想法为什么会发生这种情况,以及为什么在Orchard中使用一些基本的tinyMce插件如此困难?我在Wordpress中从未遇到过麻烦:-(。我可以在不使用模块的情况下手动添加所有内容吗?我会将其添加到我的主题并尝试一下......

修改

Giscard正确地回答说问题的罪魁祸首是我的Orchard应用程序的实际根路径。插件的加载尝试从根目录读取它们,但是在Visual Studio Orchard中运行应用程序时,通常会运行它,就像根路径是OrchardLocal一样。这会产生很多问题,但它们是必要的问题,因为如果它不使用不同的根运行,您只会注意到在不同的环境中使用不同的根部署网站时需要了解不同的根。所以我必须将root添加到所有插件加载中,如下所示:

//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');

不幸的是,以硬编码方式添加此根前缀不会削减它,因为在部署到其他服务器时它会失败,因为root可能会更改。

我不得不求助于一个肮脏的JavaScript技巧来解决它。我将以下JavaScript代码放在orchard-tinymce.js文件中:

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

现在,appPath将保留应用程序根目录的路径。

然后,我所要做的就是将插件加载代码更改为:

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

它正在运行,并且希望可以与任何root一起使用,或者即使该站点实际位于根目录(appPath将返回一个空字符串)。

1 个答案:

答案 0 :(得分:4)

TinyMceDeluxe作者在这里。巧合的是,我刚刚在几分钟前发布了该模块的新版本。我建议你试试新版本(v1.0.1),因为它比以前的版本更容易。它现在是默认TinyMce模块的替代而非附加组件,因此您只需禁用TinyMce,并启用TinyMceDeluxe。

从v1.0.1开始,您不再需要触摸resourcemanifest.cs,或覆盖任何视图/脚本/等。

TinyMceDeluxe进入Modules文件夹,作为TinyMce的兄弟。您的模块文件夹将如下所示:

modules/
    TinyMce/
    TinyMceDeluxe/

然后你自定义/modules/tinymcedeluxe/scripts/orchard-tinymce.js。默认情况下,那里有一堆关于你可以改变的信息。