Umbraco 7 - 自定义宏参数编辑器 - RTE

Question

我希望这也能对其他人有所帮助，因为关于这方面的文档并不多。

我想在我创建的宏中使用 RTE（富文本编辑器）来处理页面部分。

我已经在宏中成功渲染了 RTE。我可以从宏参数面板 select 我的 macroRte。它甚至在我编辑页面部分的值的地方呈现。我已将 "macroRte" 的别名归因于参数。

但是，它不存储值。每次我按提交时，它都会擦除内容。

我不是 Angular 专家，但我认为这就是问题所在。下面的代码。谢谢你。

查看

<div ng-controller="CustomSectionEditController" class="umb-editor umb-rte">
<umb-editor model="macroRte">
    <div ng-model="model.value">{{model.value}}</div>
</umb-editor>

控制器

angular.module("umbraco").controller("CustomSectionEditController", function ($scope) {
$scope.macroRte = {
    label: 'bodyText',
    description: 'Load some stuff here',
    view: 'rte',
    config: {
        editor: {
            toolbar: ["code", "undo", "redo", "cut", "styleselect", "bold", "italic", "alignleft", "aligncenter", "alignright", "bullist", "numlist", "link", "umbmediapicker", "table", "umbembeddialog"],
            stylesheets: ["rte"],
            dimensions: { height: 400 },
            valueType:"STRING"
        }
    }
};
});

渲染

@inherits Umbraco.Web.Macros.PartialViewMacroPage  
<div class="lh-text">
    @Model.MacroParameters["macroRte"];
</div>

有什么想法吗？ :)

Answer 1

使用它，https://github.com/engern/Umbraco-custom-macro-parameters/tree/master/App_Plugins/MacroRichText - 我能够解决我的问题。

视图需要改成如下

<div ng-controller="CustomSectionEditController">
    <ng-form>
        <umb-editor model="macroRte"></umb-editor>
    </ng-form>
</div>

控制器需要以下代码（在视图下添加

value: $scope.model.value,

和一个额外的范围控制

$scope.$watch("macroRte.value", function (newValue, oldValue) {
    $scope.model.value = newValue;
});

控制器现在看起来像这样

angular.module("umbraco").controller("CustomSectionEditController", function ($scope) {
$scope.macroRte = {
    label: 'bodyText',
    description: 'Load some stuff here',
    view: 'rte',
    value: $scope.model.value,
    config: {
        editor: {
            toolbar: ["code", "undo", "redo", "cut", "styleselect", "bold", "italic", "alignleft", "aligncenter", "alignright", "bullist", "numlist", "link", "umbmediapicker", "table", "umbembeddialog"],
            stylesheets: ["rte"],
            dimensions: { height: 400 },
            valueType:"STRING"
        }
    }
},
$scope.$watch("macroRte.value", function (newValue, oldValue) {
    $scope.model.value = newValue;
});
});

我希望这对其他人有帮助。

Umbraco 7 - 自定义宏参数编辑器 - RTE

Umbraco 7 - Custom Macro Parameter Editor - RTE

rte

angularjs

umbraco7