Copied to clipboard

Flag this post as spam?

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


  • Chris 92 posts 238 karma points
    Aug 04, 2015 @ 09:13
    Chris
    0

    Custom .css/.js files for Backoffice

    Hey,

    I'm a bit lost at the moment.

    I want to add a new editor as a propertyeditor to my backoffice.

    The editor needs css/js files to work, so I need to add those to the of the umbraco backoffice but won't find the right place to add those files.

    I won't find the right place to add my files. I found this while searching in the forum: https://our.umbraco.org/forum/developers/extending-umbraco/63379-Custom-CSSJavaScript-for-Umbraco-Backoffice

    And would like to use this approach so that I simply add the files I'll need to the right folder (if possible).

    Or if someone got a tip for a better solution, I'm open for suggestions.

    Can someone point me to the right direction?

    Kind regards, Chris

  • Stefano Beretta 102 posts 247 karma points
    Aug 04, 2015 @ 09:35
    Stefano Beretta
    0

    Hi Chris, assuming the js and css are used by your custom propertyeditor, they need to be added in the folder of your custom propertyeditor, into the App_Plugins folder.

    Here's some documentation about it (setting up and external dependencies paragraphs).

    Hope this help

    S

  • Chris 92 posts 238 karma points
    Aug 05, 2015 @ 11:35
    Chris
    0

    Thanks Stefano,

    I think that would match my needs, so I tried to create a package.manifest with all the files I need for the editor.

    My package.manifest looks like this:

    {   
    propertyEditors: [      
        {
            alias: "KendoEditor",
            /*the name*/
            name: "Kendo Ui Editor",
            editor: {
                view: "~/App_Plugins/kendo_ui_editor/kendo_ui_editor.html"
            }
        }
    ]
    ,
    javascript: [
            '~/App_Plugins/kendo_ui_editor/js/kendo_ui_editor.controller.js'
        ]
    }
    

    And my kendouieditor.controller.js looks like this:

    angular.module("Editor", [ "kendo.directives", "ngSanitize" ]) .controller("MyCtrl", function(assetsService){

    assetsService
    .load([
      '~/App_Plugins/kendo_ui_editor/js/jquery.min.js',
      '~/App_Plugins/kendo_ui_editor/js/angular.min.js',
      '~/App_Plugins/kendo_ui_editor/js/kendo.all.min.js',
      '~/App_Plugins/kendo_ui_editor/js/angular-sanitize.js'
      ])
    
    assetsService.loadCss("~/App_Plugins/kendo_ui_editor/css/kendo.common.min.css");
        assetsService.loadCss("~/App_Plugins/kendo_ui_editor/css/kendo.default.min.css");
    
    
      })
    

    I know pack everything inside of a folder (kendouieditor) with all the files I'll need and copy this folder to myumbracoinstallation/AppPlugins. When I now create a new Datatype of type kendoui_editor it won't render correct inside of my backoffice (all I'll see is a textbox).

    Is there something wrong with my code?

  • Stefano Beretta 102 posts 247 karma points
    Aug 05, 2015 @ 11:57
    Stefano Beretta
    0

    Hi Chris,

    looking at your code I can't tell you if there's something wrong, but maybe I can give you some help...

    First of all I'd open the javascript console of the browser (on the page where you included your propertyeditor) and see if there are some easily understandable javascript errors (and maybe you already did it).

    After that I've always developed only some simply propertyeditors and I always follow the "naming convention" I found on the documentation. When I define my controller in the js file I've always used the following declaration:

    angular.module("umbraco")
    .controller("AliasInTheMainfestFile",
               function(/*things i need like $scope, assetsService, ecc*/){
                  //my stuff
               });
    

    Unfortunately I'm not very skilled in angular and I don't know if my suggestions can help you. Sorry for this.

    BR,

    Stefano

  • Chris 92 posts 238 karma points
    Aug 06, 2015 @ 11:34
    Chris
    1

    Already checkt the console for errors but all I'll see is something like this:

    Error: $(...).tabdrop is not a function
    collectFromDom@http://test-server/DependencyHandler.axd?s=L3VtYnJhY28vbGliL2pxdWVyeS9qcXVlcnkubWluLmpzOy91bWJyYWNvL2xpYi9hbmd1bGFyLzEuMS41L2FuZ3VsYXIubWluLmpzOy91bWJyYWNvL2xpYi91bmRlcnNjb3JlL3VuZGVyc2NvcmUtbWluLmpzOy91bWJyYWNvL2xpYi9qcXVlcnktdWkvanF1ZXJ5LXVpLm1pbi5qczsvdW1icmFjby9saWIvYW5ndWxhci8xLjEuNS9hbmd1bGFyLWNvb2tpZXMubWluLmpzOy91bWJyYWNvL2xpYi9hbmd1bGFyLzEuMS41L2FuZ3VsYXItbW9iaWxlLmpzOy91bWJyYWNvL2xpYi9hbmd1bGFyLzEuMS41L2FuZ3VsYXItc2FuaXRpemUubWluLmpzOy91bWJyYWNvL2xpYi9hbmd1bGFyL2FuZ3VsYXItdWktc29ydGFibGUuanM7L3VtYnJhY28vbGliL2FuZ3VsYXItZHluYW1pYy1sb2NhbGUvdG1oRHluYW1pY0xvY2FsZS5taW4uanM7L3VtYnJhY28vbGliL2JsdWVpbXAtbG9hZC1pbWFnZS9sb2FkLWltYWdlLmFsbC5taW4uanM7L3VtYnJhY28vbGliL2pxdWVyeS1maWxlLXVwbG9hZC9qcXVlcnkuZmlsZXVwbG9hZC5qczsvdW1icmFjby9saWIvanF1ZXJ5LWZpbGUtdXBsb2FkL2pxdWVyeS5maWxldXBsb2FkLXByb2Nlc3MuanM7L3VtYnJhY28vbGliL2pxdWVyeS1maWxlLXVwbG9hZC9qcXVlcnkuZmlsZXVwbG9hZC1pbWFnZS5qczsvdW1icmFjby9saWIvanF1ZXJ5LWZpbGUtdXBsb2FkL2pxdWVyeS5maWxldXBsb2FkLWFuZ3VsYXIuanM7L3VtYnJhY28vbGliL2Jvb3RzdHJhcC9qcy9ib290c3RyYXAuMi4zLjIubWluLmpzOy91bWJyYWNvL2xpYi9ib290c3RyYXAtdGFiZHJvcC9ib290c3RyYXAtdGFiZHJvcC5taW4uanM7L3VtYnJhY28vbGliL3VtYnJhY28vRXh0ZW5zaW9ucy5qczsvdW1icmFjby9saWIvdW1icmFjby9OYW1lc3BhY2VNYW5hZ2VyLmpzOy91bWJyYWNvL2xpYi91bWJyYWNvL0xlZ2FjeVVtYkNsaWVudE1nci5qczsvdW1icmFjby9saWIvdW1icmFjby9MZWdhY3lTcGVlY2hCdWJibGUuanM7L3VtYnJhY28vanMvYXBwLmpzOy91bWJyYWNvL2pzL3VtYnJhY28ucmVzb3VyY2VzLmpzOy91bWJyYWNvL2pzL3VtYnJhY28uZGlyZWN0aXZlcy5qczsvdW1icmFjby9qcy91bWJyYWNvLmZpbHRlcnMuanM7L3VtYnJhY28vanMvdW1icmFjby5zZXJ2aWNlcy5qczsvdW1icmFjby9qcy91bWJyYWNvLnNlY3VyaXR5LmpzOy91bWJyYWNvL2pzL3VtYnJhY28uY29udHJvbGxlcnMuanM7L3VtYnJhY28vanMvcm91dGVzLmpzOy91bWJyYWNvL2pzL2luaXQuanM7L0FwcF9QbHVnaW5zL2tlbmRvX3VpX2VkaXRvci9qcy9qcXVlcnkubWluLmpzOy9BcHBfUGx1Z2lucy9rZW5kb191aV9lZGl0b3IvanMvYW5ndWxhci5taW4uanM7L0FwcF9QbHVnaW5zL2tlbmRvX3VpX2VkaXRvci9qcy9hbmd1bGFyLXNhbml0aXplLmpzOy9BcHBfUGx1Z2lucy9rZW5kb191aV9lZGl0b3IvanMva2VuZG8uYWxsLm1pbi5qczsvQXBwX1BsdWdpbnMva2VuZG9fdWlfZWRpdG9yL2pzL2tlbmRvLmFuZ3VsYXIubWluLmpzOw&t=Javascript&cdv=1401278486:372:43
    .link/<@http://test-server
    

    This won't help me at all.

    I think it's a problem with the KendoUi Editor i want to implement. Asked in the telerick/KenoUI forum for help, if someone can help me there I'll post my solution here.

Please Sign in or register to post replies

Write your reply to:

Draft