Creating a property editor

Overview

This guide explains how to set up a simple property editor, how to hook it into Umbraco's data types, how to hook it into Angular's modules and its injector, and finally how you can test your property editor.

Prerequisites

The end result

By the end of this guide, we will have a simple markdown editor running inside of Umbraco
registered as a data type in the backoffice, assigned to a document type, and the editor can
create and modify data.

Setting up a plugin

The first thing we must do is create a new folder inside /App_Plugins folder. We will call it
MarkDownEditor

Next, we will create a simple manifest file to describe what this plugin does. This manifest will tell Umbraco about our new property editor and allows us to inject any needed files into the application, so we create the file /App_Plugins/MarkDownEditor/package.manifestFor full package.manifest JSON documentation see here

Inside this package manifest we add a bit of JSON to describe the property editor. Have a look at the inline comments in the JSON below for details on each bit:

Register the data type in Umbraco

After the above edits are done, restart your application. Go to the Developer section, click the 3 dots next to the data types folder and create a new data type called "markdown". In the editor you can now select a property editor, where your newly added "My markdown editor" will appear.

Save the data type, and add it to a document type of your choice. Open a document of that type, and you will be greeted with an alert message saying "The controller has landed", which means all is well. You can now edit the assigned property's value with your editor.

Add external dependencies

Let's go a bit further, and load in a markdown editor JavaScript library, I've chosen pagedown, but you can use whatever you want.

First of, I'll add some external files to our package folder, in /app_plugins/markdowneditor/lib folder. These files come from the pagedown editor project found here:

Our.umbraco.com is the community mothership for Umbraco, the open source asp.net cms. With a friendly forum for all your questions, a comprehensive documentation and a ton of packages from the community.
This site is running
Umbraco version 7.13.1