Question

使用Umbraco 7网格编辑器，我需要能够在自定义网格编辑器中使用Umbraco节点选择器选择内容项，但我在实现这一点时遇到了麻烦。有一个媒体选择器，但我无法弄清楚如何更改它以选择任何内容节点。

我还尝试在网格编辑器中使用settings / styles选项，我可以在其中获取节点选择器，但是我无法将此信息传递到自定义网格编辑器视图。任何人都可以指出我在正确的方向吗？当然能够提供内容页面的链接是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

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

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

2 个答案: