umbraco forms custom rich text property editor issues

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

Serge 12 posts 103 karma points

May 19, 2018 @ 09:09
0

Umbraco Forms custom rich text property editor issues
HI all.

I'm trying to create a custom umbraco forms field with rich text editor property.

I have a field class derived from FieldType with a property:
```
[Setting("Label Text", alias = "labelText", description = "Some text here...", view = "simplelinkrte")]
public string LabelText { get; set; }
```
simplelinkrte.html view:
```
<div ng-controller="myController" class="umb-editor umb-rte">
    <textarea ng-model="model.value" rows="10" id="{{model.textAreaHtmlId}}"></textarea>
</div>
```
and controller:
```
angular.module('umbraco').controller('myController', function ($scope, $controller) {

    $scope.model.config = $scope.model.config || {};

    $scope.model.config.editor = {
        toolbar: ["code", "bold", "italic", "link"],
        stylesheets: [],
        dimensions: { height: 100, width: '100%' }
    };

    $controller('Umbraco.PropertyEditors.RTEController', { $scope: $scope });
    $scope.model.textAreaHtmlId = $scope.textAreaHtmlId;
});
```
New field can be added to a form and RTE is loading in it's settings dialogue:

But there are two issues with this field:
1. The value is not saved. I debugger RTE and can assert that $scope.model.value is updated when typing something in RTE. Am I missing some additional saving action in the controller?
2. Link dialog is not shown. But according to debug it's triggered and something changes on document body.
Any ideas on how to fix that? Umbraco v7.10.4, forms v7.0.3.

Thanks in advance,

Sergey
Copy Link

Serge 12 posts 103 karma points

May 19, 2018 @ 11:44

Fixed it like this:

view:

<div ng-controller="myController">
    <form>
        <umb-editor model="RichtTextEditor" />
    </form>
</div>

controller:

angular.module('umbraco').controller('myController', function ($scope, $controller) {

    if (!$scope.setting.value) {
        $scope.setting.value = '';
    }

    $scope.RichtTextEditor = {
        label: 'bodyText',
        description: '',
        view: 'rte',
        config: {
            editor: {
                toolbar: ["code", "bold", "italic", "link"],
                stylesheets: [],
                dimensions: { height: 100, width: '100%' }
            }
        },
        value: $scope.setting.value
    };

    $scope.$watch('RichtTextEditor', function () {
        if ($scope.RichtTextEditor != undefined) {
            $scope.setting.value = $scope.RichtTextEditor.value;
        }
    }, true);
});

Thanks Dave!

Copy Link

is working on a reply...

Please Sign in or register to post replies

Flag this post as spam?