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.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が他の場所で使用されているので、私はそれが有効である知っている：これはTinyMCEのインスタンスを含むビュー内にあります。この値をハードコードしたり、コントローラの動作を指定したりしても、まだ画像のドロップダウンリストは表示されません。私は欠けているものがあると確信しています。誰かが私にそれが何かを指摘することができますか（または少なくとも私にいくつかの合理的な指導を与える）ことができますか？

[EDIT]

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を作成する文字列を作成します。 その後、サーバーにファイルを作成します。

もう1つのことを行うには、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" 
});