belle-workbook

You can inject whatever html you want with this service, but it also has a number ofshorthand options for things like a media picker:-//the callback is called when the use selects imagesdialogService.mediaPicker({callback: function(data){//data.selection contains an array of images$(data.selection).each(function(i, item){//try using $log.log(item) to see what this data contains});}});Getting to the image dataBecause of Umbraco’s generic nature, you don’t always know where your image is, as amedia object’s data is basically an array of properties, so how do you pick the right one? - youcannot always be sure the property is called ‘UmbracoFile’ for instance.For cases like this, a helper service is available - ‘imageHelper’. This utility has some usefulmethods for accessing images embedded in property data, as well as any associatedthumbnails.Just remember to inject this ‘imageHelper’ in the controller constructor as well(in the same place as dialogService and assetsService).You can now get the image value from the selected media item, and return it through thecallback:-var imagePropVal = imageHelper.getImagePropertyValue({imageModel: item, scope: $scope });callback(imagePropVal);Now when you run the markdown editor and click the image button, we are presented with anative Umbraco dialog, listing the standard media archive.Clicking an image and choosing ‘Select’ returns the image to the editor which then renders itas:-![Koala picture][1][1]: /media/1005/Koala.jpgThe above is valid markdown code, representing the image, and if preview is turned on, youwill see the image below the editor.