2

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

按照这个有据可查的教程，我在站点设置中添加了两个文本字段。但是，我希望用户能够使用媒体选择器而不是输入路径来选择徽标。

目前我有一个带有记录、驱动程序和处理程序的 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; }
    }
}
4

1 回答 1

0

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

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

于 2013-04-03T15:29:32.557 回答