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

  • Serge 12 posts 103 karma points
    May 19, 2018 @ 11:44
    Serge
    0

    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!

Please Sign in or register to post replies

Write your reply to:

Draft