Umbraco 属性 编辑器不工作
Umbraco property editor not working
我是 运行 Umbraco 7.9.2 版,正在关注 this tutorial 学习如何创建自定义 属性 编辑器。
我的第一步是创建一个名为 MarkDownEditor 的文件夹
我的第二步是创建一个名为 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"
]
}
然后我在 MarkDownEditor 目录中创建了两个文件:markdowneditor.controller.js 和 markdowneditor.html
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");
});
最后,我在Umbraco CMS中注册了编辑器,放到了一个简单的文档类型中,终于在多个浏览器中访问了该页面。
而且...我什么也没看到。编辑器似乎正在工作(我认为),但我不明白为什么我没有看到我的警报或控制器中包含的 console.log。我做错了什么?我尝试了多种浏览器,所以我知道这不是缓存问题,并且我确保在 visual studio 中重建项目。
编辑 1:
根据建议,我尝试修改 assetService 文件路径,因为 ~ 似乎是 C# 的东西,而我的控制器是 javascript 文件。现在看起来像这样
.load([
"/App_Plugins/MarkDownEditor/lib/Markdown.Converter.js",
"/App_Plugins/MarkDownEditor/lib/Markdown.Sanitizer.js",
"/App_Plugins/MarkDownEditor/lib/Markdown.Editor.js"
])
但是,我仍然没有看到警报或控制台日志。
我意识到我做错的一件事是没有在降价模板中包含我的降价值。我已经这样做了,现在可以看到我在创建新的降价页面时放入编辑器的内容。
简单的解决方案。我的 package.manifest 文件有一个 .json 扩展名。删除后,一切正常。对于遇到此问题的任何人,〜在 javascript 文件中都可以正常工作。
我是 运行 Umbraco 7.9.2 版,正在关注 this tutorial 学习如何创建自定义 属性 编辑器。
我的第一步是创建一个名为 MarkDownEditor 的文件夹
我的第二步是创建一个名为 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"
]
}
然后我在 MarkDownEditor 目录中创建了两个文件:markdowneditor.controller.js 和 markdowneditor.html
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");
});
最后,我在Umbraco CMS中注册了编辑器,放到了一个简单的文档类型中,终于在多个浏览器中访问了该页面。
而且...我什么也没看到。编辑器似乎正在工作(我认为),但我不明白为什么我没有看到我的警报或控制器中包含的 console.log。我做错了什么?我尝试了多种浏览器,所以我知道这不是缓存问题,并且我确保在 visual studio 中重建项目。
编辑 1:
根据建议,我尝试修改 assetService 文件路径,因为 ~ 似乎是 C# 的东西,而我的控制器是 javascript 文件。现在看起来像这样
.load([
"/App_Plugins/MarkDownEditor/lib/Markdown.Converter.js",
"/App_Plugins/MarkDownEditor/lib/Markdown.Sanitizer.js",
"/App_Plugins/MarkDownEditor/lib/Markdown.Editor.js"
])
但是,我仍然没有看到警报或控制台日志。
我意识到我做错的一件事是没有在降价模板中包含我的降价值。我已经这样做了,现在可以看到我在创建新的降价页面时放入编辑器的内容。
简单的解决方案。我的 package.manifest 文件有一个 .json 扩展名。删除后,一切正常。对于遇到此问题的任何人,〜在 javascript 文件中都可以正常工作。