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
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
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.
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.
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:
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!
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.
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?
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.
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!
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
My second step was to create a file named package.manifest.json
I then created two files: markdowneditor.controller.js and markdowneditor.html in the MarkDownEditor directory
markdowneditor.controller.js
Finally, I registered the editor in the Umbraco CMS, put it in a simple document type and finally visited the page in multiple browsers.
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.
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:
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!
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
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
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?
@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.
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!
(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
is working on a reply...