Docs update
This commit is contained in:
@@ -9,14 +9,14 @@ NG_DOCS={
|
||||
"id": "umbraco.services.angularHelper",
|
||||
"shortName": "angularHelper",
|
||||
"type": "service",
|
||||
"keywords": "above accept actually already amount an and angular angularhelper any api applied apply as assign assigned automatically be both but by call callback can checks code config construct containing create creating current data deferred digest does doesn don duplicate either error errorcallback errormessage errormsg errors exception expose for force form formcontroller formname found function getcurrentform getnullform handle has headers helper http if in internally is it md message method methods mixed mostly must name need needed not note null object occuring of one opts or originaldata our own parameters promise publicly query reduce representing resolved resourcepromise resources return returned returns safeapply same scope see service services so some status string success successcallback tests that the these they this thrown to umbraco underlying unit us use uses using validate validatehasform we which will with"
|
||||
"keywords": "actually already an angular angularhelper any api applied apply as assign assigned but call checks construct create creating current digest does doesn don exception expose for force form formcontroller formname found function getcurrentform getnullform has helper if in internally is it methods mostly name need not note null object occuring of one or our own publicly return returns safeapply same scope service services so some tests that the they this thrown to umbraco unit us use uses validate validatehasform we will"
|
||||
},
|
||||
{
|
||||
"section": "api",
|
||||
"id": "umbraco.services.dialogService",
|
||||
"shortName": "dialogService",
|
||||
"type": "service",
|
||||
"keywords": "$compile $http $log $q $rootscope $templatecache accesible also an and animation any api application-wide array attach attached be been body but by callback called can chosen class close closes container contains content contentpicker controller css csss data default dialog dialogs dialogservice div document documents does dom done edit editor element existing fade for from function functon given handling has html iframe iframes in incase inject injects inline instantly into is it items its load macro macropicker make mcaro media mediapicker method modal modalclass modals module needed needs new non-angular object of on only open opens options or overlays page parameters passed path picker processing property propertydialog rendering renders representing return returned returns rootscope scope selected sent serverside service services set should show simply specific strips submitted support sure template templates that the this to tree true umb-modal umbraco url usage use used value var want whatever when which width with wrappers you"
|
||||
"keywords": "$compile $http $log $q $rootscope $templatecache accesible all also an and animation any api application-wide array attach attached be been body but by callback called can chosen class close closeall closes container contains content contentpicker controller css csss data default dialog dialogs dialogservice div document documents does dom done edit editor element existing fade for from function functon given handling has html iframe iframes in incase inject injects inline instantly into is it items its load macro macropicker make mcaro media mediapicker method modal modalclass modals module needed needs new non-angular object of on only open opens options or overlays page parameters passed path picker processing property propertydialog rendering renders representing return returned returns rootscope scope selected sent serverside service services set should show simply specific strips submitted support sure template templates that the this to tree true umb-modal umbraco url usage use used value var want whatever when which width with wrappers you"
|
||||
},
|
||||
{
|
||||
"section": "api",
|
||||
@@ -37,7 +37,7 @@ NG_DOCS={
|
||||
"id": "umbraco.services.navigationService",
|
||||
"shortName": "navigationService",
|
||||
"type": "service",
|
||||
"keywords": "$location $log $rootscope $routeparams action actions active alias always and any api application args arguments associated based but by changes changesection click clicked containing content current currently dashboard data determined dialog dialogservice dialogservicet different div dom element entire event for from function given handle hidedialog hidemenu hidenavigation hides hidesearch hidetree hiding html if iframe in inject into invoking is legacy lifetime load loads located main maintain menu method name navigation navigationservice next node of on one only open opens pane panes passed path promise related resets responsible returns scope search section sectionalias sectionresource sections selected service services should showdialog showmenu shows showsearch showtree showuserdialog source state sticky template the their this to tree treeservice triggering turning umb-panel-body umbraco url user uses view views will"
|
||||
"keywords": "$location $log $rootscope $routeparams action actions active added alias always and any api application args arguments as associated based be but by can changes changesection click clicked containing content controller created current currentaction currently currentnode dashboard data determined dialog dialogservice different div dom element entire event few for found from function get given handle here hidedialog hidemenu hidenavigation hides hidesearch hidetree hiding html if iframe in inject injected into invoking is it item legacy lifetime load loads located main maintain may menu method methods name navigation navigationservice new next node not object of on one only open opens or pane panes part passed path promise properties re-used regardless related resets responsible returns scope search section sectionalias sectionresource sections selected service services should showdialog showmenu shows showsearch showtree showuserdialog so source state sticky template that the their then they this to tree treeservice triggering turning umb-panel-body umbraco url used user uses view views whether will"
|
||||
},
|
||||
{
|
||||
"section": "api",
|
||||
@@ -93,14 +93,14 @@ NG_DOCS={
|
||||
"id": "umbraco.services.umbRequestHelper",
|
||||
"shortName": "umbRequestHelper",
|
||||
"type": "service",
|
||||
"keywords": "api for helper object requests sending server service services the to umbraco umbrequesthelper used"
|
||||
"keywords": "above accept action actionname amount an and any api apiname array automatically based be both by call callback can code collection config containing data deferred dictionary dictionarytoquerystring duplicate either error errorcallback errormessage errormsg errors for found function getapiurl handle headers helper http if in into is it key md message method mixed must name needed object of on opts or originaldata pairs parameters promise query querystrings reduce representing requested requests resolved resourcepromise resources return returned returns see sending server servervariables service services status string success successcallback that the these this to turn umbraco umbracourls umbrequesthelper underlying url used using webapi which will with"
|
||||
},
|
||||
{
|
||||
"section": "tutorials",
|
||||
"id": "CreatingAPropertyEditor",
|
||||
"shortName": "Creating a property editor",
|
||||
"type": "overview",
|
||||
"keywords": "about add alert all allows already and angular angularjs angulars any app_start application are as assigned at backoffice basic be below bit by call can com comments complete controller cover create creating data datatypes declaration define dependencies describe details do document does each editor editors egghead end explains external file files finally first folder for function functionality go guid guide handling has have hello here hook how html id in inject injector inline inside into io is it its itself javascript js json landed ll load look main manifest markdown markdowneditor markdowneditorcontroller model modify module modules multiple must my name needed new next ng-bind ng-controller not of on org our overview package part plugin prerequisites property propertyeditors register registered resources result running setting setup simple so some steps tell test that the then there these thing this through to tons tutorials type umbraco unique up us use value view want we what will with world write writing you your"
|
||||
"keywords": "$scope about above add added after alert alias all allows already an and angular angularjs angulars any app_start appear application are area as assigned at attribute automaticly avoid backoffice basic be below bit blocking but by cache call called can choice chosen class clear click client code com comes comments complete content controller converter converter2 copy cover create creating css current data datatype datatypes declaration define demo dependencies dependency describe details developer do document does done dots each edit editor editor2 editors edits egghead end execute explains external file files finally first folder for found from full function functionality further get github go greated guid guide handling has have hello here hook how html id in including info inject injector inline inside instantiate into io is it its itself javascript js json landed lets library libs like ll load loaded loading loads lod look looks main manifest markdown markdowneditor markdowneditorcontroller means message model modify module modules more multiple must my name namely needed new newly next ng-controller ng-model not now object of on only open or org our overview package pagedown part parts plugin power prerequisites project property propertyeditors publish register registered reload replace resources restart result run running sanitizer save saying scriptloader section see select sent seperat server setting setup simple simply so some source steps structure synced tell telling test text that the then there these thing this through to tons tutorials type ui umbraco umbraco-cms umbracos unique up us use value var ve view want we web website well what whatever when where which will wiring with wmd-button-bar- wmd-input wmd-input- wmd-panel wmd-preview wmd-preview- world write writing you your"
|
||||
}
|
||||
],
|
||||
"apis": {
|
||||
|
||||
@@ -17,23 +17,6 @@ NOTE: This is actually the same construct as angular uses internally for creatin
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><h3 id="resourcePromise">resourcePromise(opts)</h3>
|
||||
<div class="resourcepromise"><p>This returns a promise with an underlying http call, it is a helper method to reduce
|
||||
the amount of duplicate code needed to query http resources and automatically handle any
|
||||
Http errors. See /docs/source/using-promises-resources.md</p><h4 id="Parameters">Parameters</h4>
|
||||
<ul class="parameters"><li><code ng:non-bindable="">opts {object} </code>
|
||||
<p>A mixed object which can either be a string representing the error message to be
|
||||
returned OR an object containing either:
|
||||
{ success: successCallback, errorMsg: errorMessage }
|
||||
OR
|
||||
{ success: successCallback, error: errorCallback }
|
||||
In both of the above, the successCallback must accept these parameters: data, status, headers, config
|
||||
If using the errorCallback it must accept these parameters: data, status, headers, config
|
||||
The success callback must return the data which will be resolved by the deferred object.
|
||||
The error callback must return an object containing: {errorMsg: errorMessage, data: originalData }</p></li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><h3 id="safeApply">safeApply()</h3>
|
||||
<div class="safeapply"><p>This checks if a digest/apply is already occuring, if not it will force an apply call</p></div>
|
||||
</li>
|
||||
|
||||
@@ -42,6 +42,9 @@ sure the umbraco.services module is accesible - which it should be by default.</
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><h3 id="closeAll">closeAll()</h3>
|
||||
<div class="closeall"><p>Closes all dialogs</p></div>
|
||||
</li>
|
||||
<li><h3 id="contentPicker">contentPicker(options)</h3>
|
||||
<div class="contentpicker"><p>Opens a content picker tree in a modal, the callback returns an array of selected documents</p><h4 id="Parameters">Parameters</h4>
|
||||
<ul class="parameters"><li><code ng:non-bindable="">options {Object} </code>
|
||||
|
||||
@@ -55,10 +55,16 @@ and load the dashboard related to the section</p><h4 id="Parameters">Parameters<
|
||||
</li>
|
||||
<li><h3 id="showDialog">showDialog(args)</h3>
|
||||
<div class="showdialog"><p>Opens a dialog, for a given action on a given tree node
|
||||
uses the dialogServicet to inject the selected action dialog
|
||||
uses the dialogService to inject the selected action dialog
|
||||
into #dialog div.umb-panel-body
|
||||
the path to the dialog view is determined by:
|
||||
"views/" + current tree + "/" + action alias + ".html"</p><h4 id="Parameters">Parameters</h4>
|
||||
"views/" + current tree + "/" + action alias + ".html"
|
||||
The dialog controller will get passed a scope object that is created here. This scope
|
||||
object may be injected as part of the args object, if one is not found then a new scope
|
||||
is created. Regardless of whether a scope is created or re-used, a few properties and methods
|
||||
will be added to it so that they can be used in any dialog controller:
|
||||
scope.currentNode = the selected tree node
|
||||
scope.currentAction = the selected menu item</p><h4 id="Parameters">Parameters</h4>
|
||||
<ul class="parameters"><li><code ng:non-bindable="">args {Object} </code>
|
||||
<p>arguments passed to the function</p></li>
|
||||
<li><code ng:non-bindable="">args.scope {Scope} </code>
|
||||
|
||||
@@ -4,4 +4,42 @@
|
||||
</h1>
|
||||
<div><h2 id="Description">Description</h2>
|
||||
<div class="description"><p>A helper object used for sending requests to the server</p></div>
|
||||
<div class="member method"><h2 id="Methods">Methods</h2>
|
||||
<ul class="methods"><li><h3 id="dictionaryToQueryString">dictionaryToQueryString(queryStrings)</h3>
|
||||
<div class="dictionarytoquerystring"><p>This will turn an array of key/value pairs into a query string</p><h4 id="Parameters">Parameters</h4>
|
||||
<ul class="parameters"><li><code ng:non-bindable="">queryStrings {Array} </code>
|
||||
<p>An array of key/value pairs</p></li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><h3 id="getApiUrl">getApiUrl(apiName, actionName, queryStrings)</h3>
|
||||
<div class="getapiurl"><p>This will return the webapi Url for the requested key based on the servervariables collection</p><h4 id="Parameters">Parameters</h4>
|
||||
<ul class="parameters"><li><code ng:non-bindable="">apiName {string} </code>
|
||||
<p>The webapi name that is found in the servervariables["umbracoUrls"] dictionary</p></li>
|
||||
<li><code ng:non-bindable="">actionName {string} </code>
|
||||
<p>The webapi action name </p></li>
|
||||
<li><code ng:non-bindable="">queryStrings {object} </code>
|
||||
<p>Can be either a string or an array containing key/value pairs</p></li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><h3 id="resourcePromise">resourcePromise(opts)</h3>
|
||||
<div class="resourcepromise"><p>This returns a promise with an underlying http call, it is a helper method to reduce
|
||||
the amount of duplicate code needed to query http resources and automatically handle any
|
||||
Http errors. See /docs/source/using-promises-resources.md</p><h4 id="Parameters">Parameters</h4>
|
||||
<ul class="parameters"><li><code ng:non-bindable="">opts {object} </code>
|
||||
<p>A mixed object which can either be a string representing the error message to be
|
||||
returned OR an object containing either:
|
||||
{ success: successCallback, errorMsg: errorMessage }
|
||||
OR
|
||||
{ success: successCallback, error: errorCallback }
|
||||
In both of the above, the successCallback must accept these parameters: data, status, headers, config
|
||||
If using the errorCallback it must accept these parameters: data, status, headers, config
|
||||
The success callback must return the data which will be resolved by the deferred object.
|
||||
The error callback must return an object containing: {errorMsg: errorMessage, data: originalData }</p></li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -84,6 +84,89 @@ part handling the functionality. </p>
|
||||
<p>And in the .html file I'll add: </p>
|
||||
|
||||
<pre><code><div ng-controller="My.MarkdownEditorController">
|
||||
<textarea ng-bind="model.value"></textarea>
|
||||
<textarea ng-model="model.value"></textarea>
|
||||
</div>
|
||||
</code></pre></div>
|
||||
</code></pre>
|
||||
|
||||
<p>Now our basic parts of the editor is done namely: </p>
|
||||
|
||||
<ul>
|
||||
<li>The package manifest, telling umbraco what to lod</li>
|
||||
<li>The html view for the editor</li>
|
||||
<li>The controller for wiring up the editor with angular.</li>
|
||||
</ul>
|
||||
|
||||
<h2 id="registerthedatatypeinumbraco">Register the datatype in umbraco</h3>
|
||||
|
||||
<p>After the above edits are done, restart your application. Go to developer section, click the 3 dots next to the datatypes folder and create a new data type called "markdown". In the editor you can now select a property editor, where your newly added "markdown editor" will appear. </p>
|
||||
|
||||
<p>Save the datatype, and add it to a document type of your choice, open a document of that type, and you will be greated with an alert message saying "The controller has landed", which means all is well, and you can now edit the assigned property's value with your editor. </p>
|
||||
|
||||
<h2 id="addexternaldependencies">Add external dependencies</h3>
|
||||
|
||||
<p>Lets go a bit further, and load in a markdown editor javascript library, I've chosen pagedown, but you can use whatever you want. </p>
|
||||
|
||||
<p>First of, I'll add some external files to our package folder, in /app_plugins/markdowneditor/lib folder, these files comes from the pagedown editor project found here: </p>
|
||||
|
||||
<p><a href="Pagedown-bootstrap on github.com">https://github.com/samwillis/pagedown-bootstrap</a></p>
|
||||
|
||||
<p>Then open the <code>markdowneditor.controller.js</code> file and edit it so it looks like this: </p>
|
||||
|
||||
<pre><code>angular.module("umbraco")
|
||||
.controller("My.MarkdownEditorController",
|
||||
//inject umbracos scriptLoader
|
||||
function ($scope,scriptLoader) {
|
||||
|
||||
//tell the scriptloader to load the markdown.editor libs from the markdown editors
|
||||
//plugin folder
|
||||
scriptLoader
|
||||
.load([
|
||||
"/app_plugins/markdowneditor/lib/markdown.converter.js",
|
||||
"/app_plugins/markdowneditor/lib/markdown.sanitizer.js",
|
||||
"/app_plugins/markdowneditor/lib/markdown.editor.js"
|
||||
])
|
||||
.then(function () {
|
||||
//this function will execute when all dependencies have loaded
|
||||
alert("editor dependencies loaded");
|
||||
});
|
||||
|
||||
//load the seperat css for the editor to avoid it blocking our js loading
|
||||
scriptLoader.load(["/app_plugins/markdowneditor/lib/markdown.css"]);
|
||||
});
|
||||
</code></pre>
|
||||
|
||||
<p>This loads in our external dependency, but only when its needed by the editor.</p>
|
||||
|
||||
<p>Now lets replace that <code>alert()</code> with some code that can instantiate the pagedown editor:</p>
|
||||
|
||||
<pre><code>var converter2 = new Markdown.Converter();
|
||||
var editor2 = new Markdown.Editor(converter2, "-" + $scope.model.alias);
|
||||
editor2.run();
|
||||
</code></pre>
|
||||
|
||||
<p>and add that id to the text area in the html, for more info on the html structure, see the pagedown demo <a href="here">https://github.com/samwillis/pagedown-bootstrap/blob/master/demo/browser/demo.html</a>: </p>
|
||||
|
||||
<pre><code><div ng-controller="My.MarkdownEditorController" class="wmd-panel">
|
||||
<div id="wmd-button-bar-{{model.alias}}">
|
||||
</code></pre>
|
||||
|
||||
<p></div></p>
|
||||
|
||||
<pre><code> <textarea ng-model="model.value" class="wmd-input" id="wmd-input-{{model.alias}}">
|
||||
your content
|
||||
</textarea>
|
||||
|
||||
<div id="wmd-preview-{{model.alias}}" class="wmd-panel wmd-preview"></div>
|
||||
</div>
|
||||
</code></pre>
|
||||
|
||||
<p>Now, clear the cache, reload the document and see the pagedown editor running. </p>
|
||||
|
||||
<p>When you save or publish the value of the editor is automaticly synced to the current content object and sent to the server, all through the power of angular and the <code>ng-model</code>attribute.</p>
|
||||
|
||||
<h2 id="getthesource">Get the source</h3>
|
||||
|
||||
<p>The full source, including manifest and dependencies, can be found on the umbraco-cms project
|
||||
<a href="here">https://github.com/umbraco/Umbraco-CMS/tree/7.0.0/src/Umbraco.Web.UI.Client/src/packages/MarkdownEditor</a></p>
|
||||
|
||||
<p>Simply copy the MarkdownEditor folder to /app_plugins and restart your website, and it will be up and running.</p></div>
|
||||
|
||||
@@ -18,9 +18,9 @@ So all the steps we will go through:
|
||||
##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)
|
||||
- [egghead.io](http://www.egghead.io/)
|
||||
- [angularjs.org/tutorial](http://docs.angularjs.org/tutorial)
|
||||
- [Tekpub](http://tekpub.com/products/angular)
|
||||
|
||||
##The end result
|
||||
|
||||
@@ -98,7 +98,7 @@ Lets go a bit further, and load in a markdown editor javascript library, I've ch
|
||||
|
||||
First of, I'll add some external files to our package folder, in /app_plugins/markdowneditor/lib folder, these files comes from the pagedown editor project found here:
|
||||
|
||||
[https://github.com/samwillis/pagedown-bootstrap](Pagedown-bootstrap on github.com)
|
||||
[Pagedown-bootstrap on github.com](https://github.com/samwillis/pagedown-bootstrap)
|
||||
|
||||
Then open the `markdowneditor.controller.js` file and edit it so it looks like this:
|
||||
|
||||
@@ -132,13 +132,16 @@ Now lets replace that `alert()` with some code that can instantiate the pagedown
|
||||
var editor2 = new Markdown.Editor(converter2, "-" + $scope.model.alias);
|
||||
editor2.run();
|
||||
|
||||
and add that id to the text area in the html, for more info on the html structure, see the pagedown demo [https://github.com/samwillis/pagedown-bootstrap/blob/master/demo/browser/demo.html](here):
|
||||
and add that id to the text area in the html, for more info on the html structure, see the pagedown demo [here](https://github.com/samwillis/pagedown-bootstrap/blob/master/demo/browser/demo.html):
|
||||
|
||||
<div ng-controller="My.MarkdownEditorController" class="wmd-panel">
|
||||
<div id="wmd-button-bar-{{model.alias}}"></div>
|
||||
<textarea ng-model="model.value" class="wmd-input" id="wmd-input-{{model.alias}}"></textarea>
|
||||
</div>
|
||||
<div id="wmd-preview-{{model.alias}}" class="wmd-panel wmd-preview"></div>
|
||||
<div id="wmd-button-bar-{{model.alias}}"></div>
|
||||
|
||||
<textarea ng-model="model.value" class="wmd-input" id="wmd-input-{{model.alias}}">
|
||||
your content
|
||||
</textarea>
|
||||
|
||||
<div id="wmd-preview-{{model.alias}}" class="wmd-panel wmd-preview"></div>
|
||||
</div>
|
||||
|
||||
Now, clear the cache, reload the document and see the pagedown editor running.
|
||||
@@ -147,7 +150,7 @@ When you save or publish the value of the editor is automaticly synced to the cu
|
||||
|
||||
##Get the source
|
||||
The full source, including manifest and dependencies, can be found on the umbraco-cms project
|
||||
[https://github.com/umbraco/Umbraco-CMS/tree/7.0.0/src/Umbraco.Web.UI.Client/src/packages/MarkdownEditor](here)
|
||||
[here](https://github.com/umbraco/Umbraco-CMS/tree/7.0.0/src/Umbraco.Web.UI.Client/src/packages/MarkdownEditor)
|
||||
|
||||
Simply copy the MarkdownEditor folder to /app_plugins and restart your website, and it will be up and running.
|
||||
|
||||
|
||||
Reference in New Issue
Block a user