Search code examples
javascriptumbracoumbraco7

Umbraco property editor not working

I'm running Umbraco version 7.9.2 and following this tutorial to learn how to create custom property editors.

My first step was to create a folder called MarkDownEditor

MarkDownEditor

My second step was to create a file named package.manifest.json

{
  //you can define multiple editors
  "propertyEditors": [
    {
      /*this must be a unique alias*/
      "alias": "My.MarkdownEditor",
      /*the name*/
      "name": "My markdown editor",
      /*the icon*/
      "icon": "icon-code",
      /*grouping for "Select editor" dialog*/
      "group": "Rich Content",
      /*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"
  ]
}

I then created two files: markdowneditor.controller.js and markdowneditor.html in the MarkDownEditor directory

markdowneditor.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <div ng-controller="My.MarkdownEditorController">
        <textarea ng-model="model.value"></textarea>
    </div>
</body>
</html>

markdowneditor.controller.js

angular.module("umbraco")
    .controller("My.MarkdownEditorController",
    //inject umbracos assetsService
    function ($scope, assetsService) {

        //tell the assetsService to load the markdown.editor libs from the markdown editors
        //plugin folder
        assetsService
            .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");
                console.log('stuff has loaded!');
            });

        //load the separate css for the editor to avoid it blocking our js loading
        assetsService.loadCss("~/App_Plugins/MarkDownEditor/lib/Markdown.Editor.css");
    });

Finally, I registered the editor in the Umbraco CMS, put it in a simple document type and finally visited the page in multiple browsers.

Dashboard viewing

And... I see nothing. It seems like the editor is working (I think) but I don't get why I'm not seeing my alert or console.log that's contained in the controller. What did I do wrong? I've tried multiple browsers so I know it's not a caching issue and I've made sure to rebuild the project in visual studio.

Edit 1 :

Per suggestions, I've tried modifying the assetService file paths since ~ seems to be a C# thing and my controller is a javascript file. It now looks like this 

    .load([
        "/App_Plugins/MarkDownEditor/lib/Markdown.Converter.js",
        "/App_Plugins/MarkDownEditor/lib/Markdown.Sanitizer.js",
        "/App_Plugins/MarkDownEditor/lib/Markdown.Editor.js"
    ])

However, I'm still not seeing an alert or a console log.

One thing I did realize I was doing wrong was not including my markdown value in the markdown template. I've done that and now see the content that I put in the editor when creating a new markdown page.

Template

TemplateView

Solution

  • Simple solution. My package.manifest file had a .json extension. When that was removed, everything worked perfectly. For anyone coming across this, the ~ works perfectly fine in the javascript file.