92 lines
2.9 KiB
Plaintext
92 lines
2.9 KiB
Plaintext
|
@ngdoc overview
|
|||
|
|
@name Creating a property editor
|
|||
|
|
@description
|
|||
|
|
|
|||
|
|
##Overview
|
|||
|
|
|
|||
|
|
This guide explains how to setup a simple property editor, how to hook it into Umbraco's datatypes
|
|||
|
|
how to hook it into angulars modules and its injector, and finally how you can test your property editor.
|
|||
|
|
|
|||
|
|
So all the steps we will go through:
|
|||
|
|
|
|||
|
|
- Setting up a plugin
|
|||
|
|
- Write some basic hello world html + js
|
|||
|
|
- Register the data type in Umbraco
|
|||
|
|
- Add external dependencies
|
|||
|
|
- Complete the markdown editor
|
|||
|
|
|
|||
|
|
##Prerequisites
|
|||
|
|
This is about how to use AngularJS with umbraco, so it does not cover AngularJS itself, as there are tons of resources on that already here:
|
|||
|
|
|
|||
|
|
- [http://www.egghead.io/](egghead.io)
|
|||
|
|
- [http://docs.angularjs.org/tutorial](angularjs.org/tutorial)
|
|||
|
|
- [http://tekpub.com/products/angular](Tekpub)
|
|||
|
|
|
|||
|
|
##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.manifest`
|
|||
|
|
|
|||
|
|
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:
|
|||
|
|
|
|||
|
|
{
|
|||
|
|
//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 + js
|
|||
|
|
Then we add 2 files to the /app_plugins/markdowneditor/ folder:
|
|||
|
|
- ´markdowneditor.html`
|
|||
|
|
- `markdowneditor.controller.js`
|
|||
|
|
|
|||
|
|
These will be our main files for the editor, with the .html file handling the view and the .js
|
|||
|
|
part handling the functionality.
|
|||
|
|
|
|||
|
|
In the .js file I will add a basic angularJS controller declaration
|
|||
|
|
|
|||
|
|
angular.module("umbraco")
|
|||
|
|
.controller("My.MarkdownEditorController",
|
|||
|
|
function () {
|
|||
|
|
alert("The controller has landed");
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
And in the .html file I'll add:
|
|||
|
|
|
|||
|
|
<div ng-controller="My.MarkdownEditorController">
|
|||
|
|
<textarea ng-bind="model.value"></textarea>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
Now our basic parts of the editor is done namely:
|
|||
|
|
|
|||
|
|
- The package manifest, telling umbraco what to lod
|
|||
|
|
- The html view for the editor
|
|||
|
|
- The controller for wiring up the editor with angular.
|
|||
|
|
|
|||
|
|
##Register the datatype in umbraco
|
|||
|
|
|