Question

我正在使用的当前项目是利用租户网站。对于每个站点，我们希望能够通过修改其设置（在管理页面上，设置＆gt;一般）在租户站点之外更改徽标。

我已按照this well documented tutorial向网站设置添加了两个文本字段。但是，我希望用户能够使用媒体选择器选择徽标，而不是在路径中输入。

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

Answer 1

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

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

将MediaPicker添加到常规站点设置

1 个答案: