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

时间:2017-03-21 09:36:32

标签: angularjs umbraco7 rte

我希望这对其他人也有帮助,因为没有很多关于此的文档。

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

我已经在宏中成功渲染了RTE。我可以从宏参数面板中选择我的macroRte。它甚至呈现我编辑页面部分值的位置。我将“macroRte”的别名归因于参数。

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

我不是角色专家,但我认为这就是问题所在。代码如下。谢谢。

查看

<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>

有什么想法吗? :)

1 个答案:

答案 0 :(得分:4)

使用此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;
});
});

我希望这有助于他人。