belle-workbook

Step 1: Setting up a pluginThe first thing to do is create a new folder inside the ‘/App_Plugins’ folder. Let’s call it‘MarkDownEditor’Next create a simple manifest file to describe what this plugin does. This manifest will tellUmbraco about the new property editor and allows you to inject any needed files into theapplication, so create the file ‘/App_Plugins/MarkDownEditor/package.manifest’Inside this package manifest you need to add a bit of json to describe the property editor. Thecode snippet below contains inline comments describing the specific details:-{}/*you can define multiple editors*/propertyEditors: [{/*this must be a unique guid*/id: "7e062c13-7c41-4ad9-b389-41d88aeef87c",/*the name*/name: "Markdown Editor",/*the html file we will load for the editor*/editor: {view: "~/App_Plugins/MarkDownEditor/markdowneditor.html"}}],/*array of files we want to inject into the application on app_start*/javascript: ["~/App_Plugins/MarkDownEditor/markdowneditor.controller.js"]Writing some basic HTML & JSThe next step is to add 2 files to the /App_Plugins/MarkDownEditor/ folder:-markdowneditor.htmlmarkdowneditor.controller.jsThese will be the main files for the editor, with the .html file handling the view and the .js parthandling the functionality.In the .js file add a basic AngularJS controller declaration:-angular.module("umbraco").controller("My.MarkdownEditorController",function () {alert("The controller has landed");});