Получение выпадающего списка изображений TinyMCE в приложении MVC3

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

Вместо рендеринга javascriptresult, создайте файл js во время рендеринга страницы.

Контроллер

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
}

Сначала объявите путь к каталогу, в котором находятся изображения, а также путь к 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"
});