Umbraco 7 - Custom Macro Parameter Editor - RTE

Question

I hope this will help others too as there isn't a lot of documentation about this exactly.

I want to use a RTE (rich text editor) within a macro I've created to handle page sections.

I have successfully rendered the RTE within the macro. I can select my macroRte from the macro parameters panel. It even renders where I edit the values of my page section. I have attributed the alias of "macroRte" to the parameter.

However, it is not storing the values. Each time I press submit it is wiping the content.

I'm no Angular expert but i think that's the problem. Code below. Thank you.

View

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

Controller

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"
        }
    }
};
});

Render

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

Any ideas? :)

Elliott James Elliott James · Accepted Answer · 2017-03-21T10:27:12

using this, https://github.com/engern/Umbraco-custom-macro-parameters/tree/master/App_Plugins/MacroRichText - I was able to solve my problem.

The view needs to be changed to the following

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

The controller needed the following code (add under view

value: $scope.model.value,

and an additional scope control

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

The controller now looks like this

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;
});
});

I hope this help others.

Umbraco 7 - Custom Macro Parameter Editor - RTE

1 Answers