在自定义网格编辑器 (Umbraco 7) 中获取 node/content 选择器
Get a node/content picker in a custom grid editor (Umbraco 7)
使用 Umbraco 7 网格编辑器,我需要能够 select 在自定义网格编辑器中使用 Umbraco 节点选择器的内容项,但我在实现这一点时遇到了麻烦。有一个可用的媒体选择器,但我不知道如何更改它以选择任何内容节点。
我也曾尝试使用网格编辑器中的 settings/styles 选项,我可以在其中获取节点选择器,但是我无法通过自定义网格编辑器视图获取此信息。谁能在这里指出我正确的方向?能够向内容页面提供 link 肯定是 U7 网格中相对常见的事情吧?
在 our.umbraco.org 论坛 here 上有一个自定义节点选择器作为 Umbraco 7 中新网格编辑器的示例,带有代码示例。
我为 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
如果您随后回收应用程序池并且正确执行了上述步骤,您应该会看到如下内容:
使用 Umbraco 7 网格编辑器,我需要能够 select 在自定义网格编辑器中使用 Umbraco 节点选择器的内容项,但我在实现这一点时遇到了麻烦。有一个可用的媒体选择器,但我不知道如何更改它以选择任何内容节点。
我也曾尝试使用网格编辑器中的 settings/styles 选项,我可以在其中获取节点选择器,但是我无法通过自定义网格编辑器视图获取此信息。谁能在这里指出我正确的方向?能够向内容页面提供 link 肯定是 U7 网格中相对常见的事情吧?
在 our.umbraco.org 论坛 here 上有一个自定义节点选择器作为 Umbraco 7 中新网格编辑器的示例,带有代码示例。
我为 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
如果您随后回收应用程序池并且正确执行了上述步骤,您应该会看到如下内容: