在MVC3應用程序中獲取TinyMCE下拉圖像列表

Question

我想要獲得一個MVC3應用程序來爲外部圖像列表javascript文件提供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

而不是呈現JavaScript結果，而是在呈現頁面時創建一個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" 
});