如何使用TinyMCE捆绑？

Question

当我尝试渲染缩小的TinyMCE包时,Internet Explorer很合适.因此,为了创建一个避免缩小的包,我按照这些说明在BundleConfig中设置了"通用"或"基本"包:

bundles.Add( new Bundle( "~/Scripts/tinymce" )
                 .Include( "~/Scripts/tinymce/tinymce.min.js",
                            "~/Scripts/tinymce/jquery.tinymce.min.js" ) );

如何在页面上呈现此内容？以下所有内容似乎都不起作用:

@Bundles.Render( "~/Scripts/tinymce" )
@Bundle.Render( "~/Scripts/tinymce" )
@Bundle( "~/Scripts/tinymce" )

这至少呈现标记:

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

但它在尝试加载文件时抛出403错误:

"NetworkError: 403 Forbidden - http://localhost:1062/Scripts/tinymce/?v=MTojK5ORvAZmonNqNGJ3aWhOYyor-Fa8dZHTqfSOlUM1"

Answer 1

正如评论中指出的那样,这个问题涉及部分问题.由于您无法为捆绑包提供名称也是现有目录的名称,因此我将其重命名为:

bundles.Add( new Bundle( "~/js/tinymce" )
                 .Include( "~/Scripts/tinymce/tinymce.min.js",
                            "~/Scripts/tinymce/jquery.tinymce.min.js" ) );

但是,由于TinyMCE动态加载依赖项(插件和主题文件)的方式,我必须确保所有这些都包含在包中:

bundles.Add( new Bundle( "~/js/tinymce" )
                 .Include( "~/Scripts/tinymce/tinymce.min.js",
                           "~/Scripts/tinymce/jquery.tinymce.min.js",
                           "~/Scripts/tinymce/plugins/autoresize/plugin.min.js",
                           "~/Scripts/tinymce/plugins/charmap/plugin.min.js",
                           "~/Scripts/tinymce/plugins/code/plugin.min.js",
                           "~/Scripts/tinymce/plugins/image/plugin.min.js",
                           "~/Scripts/tinymce/plugins/table/plugin.min.js",
                           "~/Scripts/tinymce/plugins/textcolor/plugin.min.js",
                           "~/Scripts/tinymce/themes/modern/theme.min.js") );

这意味着如果我想要一个新插件,则需要更改代码并重新部署bin文件,而不是简单的脚本更新.但是,对此应用程序的要求没有改变,可能不会很快(而且,它是一个内部应用程序),所以这不是一个真正的问题.

最后,TinyMCE还动态加载皮肤文件(css,图像和字体).我可以通过更改TinyMCE配置来指定skin目录来解决这个问题:

$('.tinymce').tinymce({
    skin_url: '/Scripts/tinymce/skins/lightgray',
    // other stuff...
});

我尝试为主题文件创建一个包:

bundles.Add( new Bundle( "~/css/tinymce" )
                 .Include( "~/Scripts/tinymce/skins/lightgray/*.css" ) );

并改变我的配置:

$('.tinymce').tinymce({
    skin_url: '/css/tinymce',
    // blah blah blah...
});

但是,因为TinyMCE查找单个文件,所以这不起作用.它为skin.min.css和content.min.css引发了404错误.

所以现在我有一些捆绑的TinyMCE文件,但不是全部.这至少比我以前更好(对每个文件单独的HTTP请求).

Answer 2

将捆绑包名称更改为磁盘上现有位置以外的名称

例如：Bundle( "~/Scripts/tinymce")到Bundle( "~/js/tinymce")