将MediaPicker添加到常规站点设置 [英] Add a MediaPicker to the General Site Settings

问题描述

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

The current project I'm on is utilizing tenant sites. With each site, we want the ability to change the logo through out the tenant site by modifying the its settings (on the admin page, settings > general).

我已按照此文档齐全的教程，在网站设置中添加了两个文本字段.但是，我希望用户能够使用媒体选择器来选择徽标，而不是输入路径.

I've added two text fields to the site settings by following this well documented tutorial. However, I'd like the user to be able to pick the logos using the media picker instead of typing in the path.

当前，我有一个LogoBarSettings部分及其记录，驱动程序和处理程序.我不确定如何将媒体选择器添加到我的LogoBarSettings中，即使这样做了，我也必须创建另一个处理程序，驱动程序并为其记录吗?我无法想象会，但是到那时我还是很困.

Currently I have a LogoBarSettings part with its record, driver and handler. I'm not sure how to add the media picker to the my LogoBarSettings and even if I did, must I also create another handler, driver, and record for it? I can't imagine I would but I'm pretty stuck at this point.

有人可以提供一些指导吗?

Can someone provide some direction on this?

这是我的LogoBarSettings

Here is my 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.提供回调函数以捕获选择的媒体.

The MediaPicker is invoked through Javascript, so you shouldn't need to change any of your model classes. When the MediaPicker is loaded for a page, it sets up a jQuery event handler for all form elements on the page. Triggering the event orchard-admin-pickimage-open will open the MediaPicker. Supply a callback function to capture the picked media.

这是一个简单的示例，您可以在加载了MediaPicker的页面(例如页面编辑器)中的Firebug或Chrome开发者工具中运行:

Here is a quick example that you can run in Firebug or Chrome Developer Tools from a page which has the MediaPicker loaded, such as a Page editor:

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

这应该打印类似于以下内容的内容:

This should print something similar to this:

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.

The BodyPart editor integrates Orchard's MediaPicker with TinyMce, so you can start looking at that module for a more complete example, specifically Modules\TinyMce\Scripts\plugins\mediapicker\editor_plugin_src.js.

这篇关于将MediaPicker添加到常规站点设置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！