在自定义网格编辑器中获取节点/内容选择器 (Umbraco 7)

Question

使用 Umbraco 7 网格编辑器，我需要能够在自定义网格编辑器中使用 Umbraco 节点选择器选择内容项，但我无法实现这一点。有一个可用的媒体选择器，但我不知道如何更改它以选择任何内容节点。

我还尝试使用网格编辑器中的设置/样式选项，我可以在其中获取节点选择器，但是我无法通过自定义网格编辑器视图获取此信息。谁能在这里指出我正确的方向？能够提供指向内容页面的链接肯定是 U7 网格中相对常见的事情吗？

Answer 1

我为 Umbraco v8 制作了一个自定义的 Content and Link picker 网格编辑器。可以在 GitHub 上找到

https://github.com/mausba/umbraco-v8-content-and-link-pickers-as-grid-editors

其实很简单！您在 /AppPlugins/YourPackage 文件夹中创建了 4 个文件 - 对于内容选择器，它将是这样的：

package.manifest - 此文件包含有关编辑器的所有信息

{
  "gridEditors": [
    {
      "name": "Content Picker",
      "alias": "customcontentpicker",
      "view": "/app_plugins/custom.grideditor.contentpicker/contentpicker.html",
      "icon": "icon-link"
    }
  ],
  "javascript": [
    "~/app_plugins/custom.grideditor.contentpicker/contentpicker.controllers.js"
  ]
}

contentPicker.html - 此文件用于在 umbraco 后台渲染内容

<div ng-controller="custom.propertyeditors.grid.contentpickereditorcontroller">

    <div class="umb-editor-placeholde" ng-click="setContentId()">
        <i class="icon icon-settings-alt"></i>
        <div ng-id="!control.$inserted" class="help-text">Click to insert Page</div>

        <div ng-if="control.value" style="margin-top: 20px;">
            <p>
                Node ID: {{id}}
                <br />
                Node Name: {{name}}
                <br />
                udi: {{udi}}
            </p>
            {{control.value}}
        </div>

    </div>
</div>

contentpicker.controllers.js - 此文件用于将控制器连接到此视图

angular.module("umbraco")
    .controller("custom.propertyeditors.grid.contentpickereditorcontroller",
        function ($scope, $rootScope, $timeout, editorService) {

            $scope.setContentId = function () {

                const contentPicker = {
                    submit: function (model) {
                        var selection = model.selection[0];
                        $scope.control.value = {
                            id: selection.id,
                            name: selection.name,
                            udi: selection.udi
                        };
                        $scope.setPreview();
                        editorService.close();
                    },
                    close: function () {
                        editorService.close();
                    }
                };
                editorService.contentPicker(contentPicker);
            };

            $scope.setPreview = function () {

                if (!$scope.control.value.id) return;

                $scope.id = $scope.control.value.id;
                $scope.name = $scope.control.value.name;
                $scope.udi = $scope.control.value.udi;
            };

            $timeout(function () {
                if ($scope.control.$initializing) {
                    $scope.setContentId();
                } else {
                    $scope.setPreview();
                }
            }, 200);

        });

contentpicker.cshtml - 这是在前端用于呈现网格内容的模板

@inherits Umbraco.Web.Mvc.UmbracoViewPage<dynamic>

@{
    if (Model.value == null) { return; }
}

@Model.value.name
@Model.value.id
@Model.value.udi

如果您随后回收了应用程序池并且您正确执行了上述步骤，您应该会看到如下内容：

Answer 2

our.umbraco.org 论坛here 上有一个自定义节点选择器作为 Umbraco 7 中新网格编辑器的示例，并附有代码示例。