A custom umbraco directive which allows the user to bing an umb-editor to a property whilst providing a custom config.

readme.md

== How to use ==

I've included a basic view, controller and package manifest to type it all together. Folder structure not included.

== The idea ==

Allows the use an umb-editor with any config file (see example with an rte).

This is mostly for use with custom sections which do not contain the typical Umbraco editors.

package.manifest

{
  javascript: [
    '~/App_Plugins/YourPackage/your.controller.js',
    '~/App_Plugins/YourPackage/umbraco-editor-with-config.js',
  ]
}

umbraco-editor-with-config.js

angular.module("umbraco.directives").directive('umbEditorWithConfig', function () {
    return {
        restrict: 'E',
        scope: {
            config: '=config',
            model: '=model'
        },
        link: function (scope, element) {
            var isEmpty = typeof (scope.model) == "undefined" || typeof (scope.model.value) == "undefined";
            console.log(isEmpty);

            if (isEmpty) {
                scope.model = scope.config;
            } else {
                var originalValue = scope.model.value;
                console.log(originalValue);

                scope.model = scope.config;
                scope.model.value = originalValue;
            }
        },
        template: '<umb-editor model="model"></umb-editor>'
    };
});

view.html

<form  ng-controller="Your.Controller">
  <umb-editor-with-config model="myvalue" config="defaultRteConfig"></umb-editor-with-config>
</form>

your.controller.js

angular.module("umbraco").controller("Your.Controller",
    function ($scope) {
        $scope.defaultRteConfig = {
            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", "umbmacro", "table", "umbembeddialog"],
                    stylesheets: [],
                    dimensions: { height: 400, width: 250 }
                }
            }
        };
        
        $scope.myvalue = {};
});