Question

我正在编写自定义小部件，我想创建一个包含图像选择器的表单，该图像选择器从现有媒体库中选择图像。我注意到我可以使用现有的媒体库小部件，但我不知道如何将它包含在我的小部件中。我可以以某种方式从EditPart视图中导入它吗？

[更新] 以下是示例代码的一部分。假设您有此编辑部件模板：

@using MediaLibrary.FilePicker //Is there a way to add it doing something like this??
@model Maps.Models.MapPart

<fieldset>
  <legend>Map Fields</legend>

   <div class="editor-label">
     @Html.LabelFor(model => model.Latitude)
   </div>
   <div class="editor-field">
      @Html.TextBoxFor(model => model.Latitude)
      @Html.ValidationMessageFor(model => model.Latitude)
   </div>

    <div class="editor-label">
      @Html.LabelFor(model => model.Longitude)
    </div>
    <div class="editor-field">
      @Html.TextBoxFor(model => model.Longitude)
      @Html.ValidationMessageFor(model => model.Longitude)
    </div>

</fieldset>

Answer 1

只需添加媒体库选择器字段。

Answer 2

我想出了怎么做。

我试图使用自定义小部件中的图像选择器。以下是我完成此步骤的步骤。

1.在我的Widget项目中添加对MediaPicker库的引用。 2.添加以下代码：

@using Orchard.ContentManagement
@using Orchard.Utility.Extensions
@using Orchard.MediaPicker
@model MyWidget.Models.PickerForm
<div class="editor-label">
    <label for="ImageUrl">Image Url</label>
</div>
<div class="editor-field">
    @Html.TextBoxFor(m => m.ImagePath, new { @class = "text single-line", @id = "ImageUrl" })<br />
    @Html.ValidationMessageFor(m => m.ImagePath)<br />
    <input type="button" class="button" id="PickImageUrl" value="Pick Image" />
</div>
@using (Script.Foot())
{
<script type="text/javascript">
    //<![CDATA[
    jQuery(function ($) {
        var baseUrl = "@HttpContext.Current.Request.ToRootUrlString().TrimEnd('/')";
        $("#PickImageUrl").click(function () {
            $("form").trigger("orchard-admin-pickimage-open",
            {
                img: $("#ImageUrl").val(),
                uploadMediaPath: "About",
                callback: function (data) {
                    $("#ImageUrl").val(baseUrl + data.img.src);
                }
            });
        });
    });
//]]>
</script>
}

瞧。

如何使用/添加现有的媒体库小部件到Orchard CMS中的自定义小部件？

2 个答案: