Skip to content

Instantly share code, notes, and snippets.

@jamiepollock
Created September 19, 2014 16:32
Show Gist options
  • Save jamiepollock/1b5cc40e7f59bd06ba42 to your computer and use it in GitHub Desktop.
Save jamiepollock/1b5cc40e7f59bd06ba42 to your computer and use it in GitHub Desktop.
A custom umbraco directive which allows the user to bing an umb-editor to a property whilst providing a custom config.

== 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.

{
javascript: [
'~/App_Plugins/YourPackage/your.controller.js',
'~/App_Plugins/YourPackage/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>'
};
});
<form ng-controller="Your.Controller">
<umb-editor-with-config model="myvalue" config="defaultRteConfig"></umb-editor-with-config>
</form>
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 = {};
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment