Question

我正在尝试使用外部图像列表javascript文件获取一个MVC3应用程序来为TinyMCE提供信息。我有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

在渲染页面时，不要渲染javascriptresult，而是创建一个js文件。

<强>控制器

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

MakeJSFile（）函数将创建我们需要的jsfile，然后将呈现页面。

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
}

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

您只需再做一件事，创建 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"
});

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

1 个答案: