将 MediaPicker 添加到常规站点设置

我当前正在进行的项目正在利用租户站点。对于每个站点，我们希望能够通过修改其设置（在管理页面上，设置 > 常规）来更改整个租户站点的徽标。

我通过以下方式向站点设置添加了两个文本字段这个有据可查的教程 http://docs.orchardproject.net/Documentation/Adding-custom-settings。但是，我希望用户能够使用媒体选择器来选择徽标，而不是输入路径。

目前我有一个 LogoBarSettings 部分及其记录、驱动程序和处理程序。我不确定如何将媒体选择器添加到我的 LogoBarSettings 中，即使我这样做了，我还必须为其创建另一个处理程序、驱动程序和记录吗？我无法想象我会这样做，但我现在很困惑。

有人可以对此提供一些指导吗？

这是我的 LogoBarSettings

public class LogoBarSettings : ContentPart<LogoBarSettingsPartRecord>
{
    public string ImageUrl
    {
        get { return Record.ImageUrl; }
        set { Record.ImageUrl = value; }
    }

    public string ImageAltText
    {
        get { return Record.ImageAltText; }
        set { Record.ImageAltText = value; }
    }
}

MediaPicker 是通过 Javascript 调用的，因此您不需要更改任何模型类。当为页面加载 MediaPicker 时，它会为页面上的所有表单元素设置一个 jQuery 事件处理程序。触发事件orchard-admin-pickimage-open将打开 MediaPicker。提供回调函数来捕获所选媒体。

以下是一个简单示例，您可以从加载了 MediaPicker 的页面（例如页面编辑器）在 Firebug 或 Chrome 开发人员工具中运行：

$('form').trigger("orchard-admin-pickimage-open", { 
    callback: function(data) { 
        console.log(data); 
}})

这应该打印类似这样的内容：

Object {img: Object}
    img: Object
        align: ""
        alt: ""
        class: ""
        height: "64"
        html: "<img src="/Media/Default/images/test.jpg" alt="" width="64" height="64"/>"
        src: "/Media/Default/images/test.jpg"
        style: ""
        width: "64"
    __proto__: Object
__proto__: Object

The BodyPart编辑器将 Orchard 的 MediaPicker 与 TinyMce 集成，因此您可以开始查看该模块以获得更完整的示例，特别是Modules\TinyMce\Scripts\plugins\mediapicker\editor_plugin_src.js.