Simple reusable rte editor - wrapping umb-editor rte with a reusable config for use in a custom Umbraco backoffice ui

MyDirective.js

angular.module("umbraco.directives").directive('simplerichtexteditor', function (assetsService) {
    return {
        restrict: 'E',
        scope: {
            field: '='
        },
        controller: function ($scope, $element) {
            $scope.model = {
                alias: 'simpleRichtextEditor',
                view: 'rte',
                config: {
                    editor: {
                        toolbar: [ 'preview', '|', 'undo', 'redo', '|', 'copy', 'cut', 'paste', '|', 'bold', 'italic', '|', 'link', 'unlink'],
                        stylesheets: [],
                        dimensions: { height: 400, width: '100%' }
                    }
                },
                value: $scope.field
            };
            
            $scope.$watch('model', function () {
                if ($scope.model != undefined) {
                    $scope.field = $scope.model.value;
                }
            }, true);

        },
        templateUrl: '/App_Plugins/SimpleDirectives/views/simplerichtexteditor.html'
    };
});

MyDirectiveView.html

<div class="richtexteditor--simple">
    <umb-editor model="model"></umb-editor>
</div>

Usage.html

<simplerichtexteditor field="model.myRteValue" ng-if="model" />