Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Joshua 6 posts 105 karma points
    Mar 24, 2018 @ 22:15
    Joshua
    0

    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

    Folder Structure

    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

    <!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.

    Template Registering TemplateView

    So the weird thing is, I can see the content that I type into the editor. But neither my console.log or my alert is firing when I view this page. I really don't get what I'm doing wrong here. I followed the tutorial exactly. I'm not seeing any console errors. I've rebuilt my project and tried multiple browsers in case it was a caching issue.

  • Marc Goodson 2123 posts 14214 karma points MVP 8x c-trib
    Mar 25, 2018 @ 00:50
    Marc Goodson
    100

    Hi Joshua

    I did a quick cut and paste of what you have into a test project, and added the property editor to a document type, and it works, I see the alert! when I visit a node in the backoffice based on the document type:

    enter image description here

    But here's the thing, and I'm really only guessing this might be your issue...

    There is an existing Markdown editor already in Umbraco...

    And when you setup your DataType to use for your property if you chose 'Markdown editor' and NOT 'My markdown editor', then you will be trying to test the one that's already in the core, and not your tutorial one... so your code is not loaded... your seeing a markdown editor - but not your custom tutorial one!

    enter image description here

    Anyway might not be the case, but worth checking before you wrack your brains further...

    ... and I've cut and pasted the above so you don't seem to have any errors in what you have created.

    regards

    Marc

  • Joshua 6 posts 105 karma points
    Mar 25, 2018 @ 01:08
    Joshua
    0

    Marc

    I definitely think you are correct! I was selecting Markdown editor. Here's the thing though. I'm not seeing my alias. I tried changing it in my JSON file

    {
      //you can define multiple editors
      "propertyEditors": [
        {
          /*this must be a unique alias*/
          "alias": "My.MarkdownEditor",
          /*the name*/
          "name": "zzz",
          /*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 built the project and logged in. When I go the property editor alias dropdown, I don't see my alias. Any idea why that might be?

  • Joshua 6 posts 105 karma points
    Mar 25, 2018 @ 01:20
    Joshua
    0

    @Marc

    I figured it out. I was confused by the tutorial. I thought that the manifest file had to be 'package.manifest.json' when in fact it just needs to be 'package.manifest'.

    Once I changed this, it worked perfectly. Thank you for your help. Had I not known that Umbraco already had this editor, I still would have been confused.

  • Marc Goodson 2123 posts 14214 karma points MVP 8x c-trib
    Mar 25, 2018 @ 10:00
    Marc Goodson
    0

    Cool, glad you got it working!!

    If there is anything that could be improved on the wording of the tutorial to make it clearer for others, then your perspective of running the tutorial for the first time is really valuable!

    There is an edit button in the top right of the page, and it would be ace to suggest any tweaks that would make the exercise clearer!

    enter image description here

    (or if you just have feedback, then the issue tracker on the docs https://github.com/umbraco/UmbracoDocs/issues would help track that we can make this page better)

    Thanks

    Marc

Please Sign in or register to post replies

Write your reply to:

Draft