Add more documentation on property editors

src/Umbraco.Web.UI.Client/docs/src/tutorials/Adding-Configuration-To-Property-Editor.ngdoc

@@ -0,0 +1,66 @@
+@ngdoc overview
+@name Adding configuration to a property editor
+@description
+
+##Overview
+This is step 2 in our guid to building a property editor. This step continues work on the markdown editor we build in step 1, but goes further to show you how you can add configuration options to the editor. 
+
+
+##Configuration?
+So, an important part of building good property editors, are to build something relatively flexible, so you can reuse it many many times, for different things. Like the rich text editor in Umbraco, that allows you to choose which buttons and stylesheets you want to use on each instance of the editor. 
+
+So an editor can be used several times, with different configurations, and that is what we will be working on now. 
+
+
+##package.manifest
+So to add configuration options to our markdown editor, open the package.manifest file. rigth below the editor definition, paste in the following: 
+
+	preValueEditor: {
+		fields: [
+			{
+				label: "Preview",
+				description: "Display a live preview",
+				key: "preview",
+				view: "boolean"
+			},
+			{
+				label: "Default value",
+				description: "If value is blank, the editor will show this",
+				key: "defaultValue",
+				view: "textarea"
+			}
+		]
+	}
+
+**Remember to: ** seperate the editor element and prevalue editor definition with a comma, or you will get a json error. 
+
+So what did we just add? We added a prevalue editor, with a `fields` collection. This collection contains infomation about the UI we will render on the data type configuration for this editor. 
+
+So the first gets the label "Preview" and uses the view "boolean", so this will allow us to turn preview on/off and will provide the user with a simple checkbox. The name "boolean" comes from the convention that all preview editors are stored in /umbraco/views/prevalueeditors/ and then found via `<name>.html`
+
+Same with the next one, only that it will provide the user with a textarea to input a default value for the editor. 
+
+Save the manifest **restart the app pool** and have a look at the markdown datatype in Umbraco now. You should now see that you have 2 configuration options. 
+
+##Using the configuration
+The next step is to gain access to our new configuration options. For this, open the `markdowneditor.controller.js` file 
+
+Lets first add the default value functionality. So basicly when the ´$scope.model.value` is empty or undefined, we want to use the default value, to do that, we add the following to the very beginning of the controller: 
+
+	if($scope.model.value === null || $scope.model.value === ""){
+	    $scope.model.value = $scope.model.config.defaultValue;
+	}
+
+You see whats new? - the `$scope.model.config` object is. And the other thing you will notice is that because of our configuration, we now have access to `$scope.model.config.defaultValue` which contains the configiration value for that key, its that easy to setup and use configuration values from code. 
+
+However, you can also use these values without any javascript, so open the `markdowneditor.html` file instead. 
+
+Because we can also use the configuration directly in our html like here, where we use it to toggle the preview `<div>`, using the ng-hide attribute: 
+
+	<div ng-show="model.config.preview" class="wmd-panel wmd-preview"></div>
+
+
+##Get the codes
+The latest update to the markdowneditor project is on github where you can see all the [files and the manifest.](https://github.com/umbraco/Umbraco-CMS/tree/7.0.0/src/Umbraco.Web.UI.Client/src/packages/MarkdownEditor) 	 
+
+

src/Umbraco.Web.UI.Client/src/packages/MarkdownEditor/markdowneditor.controller.js

@@ -1,7 +1,7 @@
 angular.module("umbraco")
 .controller("My.MarkdownEditorController",
-//inject umbracos assetsServce
-function ($scope,assetsService) {
+//inject umbracos assetsServce and dialog service
+function ($scope,assetsService, dialogService) {
 
     //tell the assets service to load the markdown.editor libs from the markdown editors
     //plugin folder
@@ -21,6 +21,29 @@ function ($scope,assetsService) {
             var converter2 = new Markdown.Converter();
             var editor2 = new Markdown.Editor(converter2, "-" + $scope.model.alias);
             editor2.run();
+
+            //subscribe to the image dialog clicks
+            editor2.hooks.set("insertImageDialog", function (callback) {
+                   alert("Please click okay to start scanning your brain...");
+                   
+                   dialogService.mediaPicker({callback: function(data){
+                        $(data.selection).each(function(i, item){
+                               alert(item);
+                        });
+                   }});
+
+/*
+                   setTimeout(function () {
+                       var prompt = "We have detected that you like cats. Do you want to insert an image of a cat?";
+                       if (confirm(prompt))
+                           callback("http://icanhascheezburger.files.wordpress.com/2007/06/schrodingers-lolcat1.jpg")
+                       else
+                           callback(null);
+                   }, 2000);
+*/
+
+                   return true; // tell the editor that we'll take care of getting the image url
+               });
 		});
 
     //load the seperat css for the editor to avoid it blocking our js loading TEMP HACK