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

Question

我试图获得一个MVC3应用程序，以饲料TinyMCE与外部图像列表javascript文件。我已经设置了TinyMCE，这样如果我使用静态图像列表文件，我就可以获得图像列表，这样我就知道该部分是有效的。但是由于我需要动态地为每个用户创建图像列表，所以我需要比静态文件更灵活的东西。这取决于从以下控制器动作提供javascript:

    public JavaScriptResult TinyMCEImageList(int id)
    {
        ListHelper lh = new ListHelper();
        string js = "var tinyMCEImageList = new Array(rn" + "// Name, URLrn";
        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 += ",rn";
            }
            i--;
        }
        js += "rn);";
        return JavaScript(js);
    }

listthelper . 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结果。

控制器

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函数

<<p> PopulateList函数/strong>

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