在 MVC3 应用程序中获取 TinyMCE 下拉图像列表

Question

我正在尝试让 MVC3 应用程序向 TinyMCE 提供外部图像列表 javascript 文件。我设置了 TinyMCE，这样如果我使用静态图像列表文件，我就会得到图像列表，所以我知道该部分可以工作。但由于我需要为每个用户动态创建图像列表，因此我需要比静态文件更灵活的东西。归根结底是通过以下控制器操作提供 javascript：

    public JavaScriptResult TinyMCEImageList(int id)
    {
        ListHelper lh = new ListHelper();
        string js = "var tinyMCEImageList = new Array(\r\n" + "// Name, URL\r\n";

        Dictionary<string, string> dict = lh.GetPetImageURLs(id);

        int i = dict.Count();
        foreach (var item in dict)
        {
            js += "['" + item.Key + "', '" + item.Value + "']";
            if (i > 1)
            {
                js += ",\r\n";
            }
            i--;
        }
        js += "\r\n);";

        return JavaScript(js);
    }

ListHelper.GetPetImageURLs() 返回一个字典对象，这只是保存每个图像的标题和 URL 的便捷方法。当我使用适当的 id 参数从浏览器调用此控制器时，我得到了我认为可行的 JS 文件。事实上，这样的结果就是我用来创建静态文件的结果，我用来测试 TinyMCE 图像列表设置，这给了我一个实际的下拉图像列表。

这是我的 TinyMCE 设置。这是包含 TinyMCE 实例的视图内部：

tinyMCE.init({
    mode: "textareas",
    theme: "advanced",
    plugins: "lists,pagebreak,style,table,inlinepopups,advhr,advimage,preview,searchreplace,print,paste,visualchars,nonbreaking",

    theme_advanced_buttons1: "newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,formatselect,fontselect,fontsizeselect",
    theme_advanced_buttons2: "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,forecolor,backcolor,image",
    theme_advanced_buttons3: "tablecontrols,|,visualaid,|,sub,sup,|,advhr,|,preview,print,|,visualchars,nonbreaking,template,blockquote,pagebreak",

    theme_advanced_toolbar_location: "top",
    theme_advanced_toolbar_align: "left",
    theme_advanced_statusbar_location: "bottom",
    theme_advanced_resizing: true,

    external_image_list_url: "/InstructionDocument/TinyMCEImageList/@ViewBag.PetID"
});

@ViewBag.PetID 正在其他地方使用，所以我知道它是有效的。即使我硬编码这个值，或者专门指向控制器操作，我仍然没有得到图像的下拉列表。我确信我缺少一些简单的东西；有人可以向我指出它是什么（或者至少给我一些合理的指导）吗？

[编辑]

TinyMCEImageList() 操作的输出如下：

    var tinyMCEImageList = new Array(
            // Name, URL
            ['System Guinea Pig - 4', 'http://www.remindapet.com/Content/images/galler/1_4_970BB64F7C1A4375AF5722B8A62C8708.jpg'],
            ['System Guinea Pig - 5', 'http://www.remindapet.com/Content/images/gallery/1_4_CBA0D3DDBBED41C583A6E6C46FC9DADF.jpg']
    );

另外，这里是上述操作返回的 javascript 的标头：

    Server  ASP.NET Development Server/10.0.0.0
    Date    Fri, 23 Dec 2011 00:14:31 GMT
    X-AspNet-Version    4.0.30319
    X-AspNetMvc-Version 3.0
    Cache-Control   private
    Content-Type    application/x-javascript; charset=utf-8
    Content-Length  292
    Connection  Close

所以，该操作确实返回一个 JavascriptResult。我只是想不出如何让 TinyMCE 看到它。

谢谢！

Answer 1

在渲染页面时创建一个 js 文件，而不是渲染 javascript 结果。

Controller

public ActionResult Index() 
{
    MakeJSFile();
    return View();
}

MakeJSFile()函数将创建我们需要的js文件，然后页面将被渲染。

MakeJSFile()函数

public void MakeJSFile()
{
    #region declare
    var imgPath = Server.MapPath("~/Content/images/gallery/");
    var jsPath = Server.MapPath("~/Scripts/image_list.js");
    List<string> fileList = populateList(imgPath, ".jpg");
    #endregion

    #region build jsfile
    string content = "var tinyMCEImageList = new Array(";
        foreach (var item in fileList)
        {
            content += "[\"" + item + "\", \"/Content/img/" + item + "\"]";
            if (item != fileList.Last())
                content += ",";
        }
    content += ");";
    #endregion

    #region create file
    StreamWriter sw = new StreamWriter(jsPath, false);
    sw.Write(content);
    sw.Close();
    #endregion
}

首先声明图像所在目录的路径，以及js文件的路径。然后创建一个包含文件名的列表并填充它（使用 populateList 函数）。
然后创建一个字符串来构建 js 文件。
之后在您的服务器中创建文件。

您只需要再做一件事，创建 populateList 函数。

PopulateList 函数

public List<string> populateList(string path, params string[] extensions)
{
    List<string> list = new List<string>();
    FileInfo fi = new FileInfo(path);
    DirectoryInfo di = fi.Directory;
    FileSystemInfo[] fsi = di.GetFiles();
    foreach (FileSystemInfo info in fsi)
        foreach (var ext in extensions)
            if (info.Extension == ext)
                list.Add(info.Name);
    return list;
}

该函数需要目录路径和文件扩展名。

如果你想要一个特定的列表，只需改变这个函数即可。

还有一件事，不要忘记更改 external_image_list_url 的值

tinyMCE.init({
    ...

    external_image_list_url: "/Scripts/image_list.js"
});