add simple javascript to backend

Go to solution

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

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

Jonathan L Folland 27 posts 159 karma points

Aug 29, 2023 @ 18:44

Using Umbraco And Getting Started

Umbraco 9

I would like to add a simple jquery to customize the backend. I have tried doing that with an app plugin. I have a manifest:

    {
  "name": "MyTweaks",
  "version": "1.0.0",
  "allowPackageTelemetry": true,
  "bundleOptions": "Default",
  "css": [
    "~/App_Plugins/tweaks/css/umbraco-tweaks.css"
  ],
  "js": [
    "~/App_Plugins/tweaks/js/umbraco-tweaks.js"
  ]
}

I see that the css file gets loaded, but the js file, which is a simple jquery block does not:

$(document).on('DOMNodeInserted', function(e) {
    if ( $(e.target).is("div.tox-tinymce")) {
       var styleAttr = $(e.target).attr("style");
       if (styleAttr && styleAttr.indexOf("height: 300px;") >  0) { 
        var umbContainer = $(e.target).closest("div.umb-rte-editor-con");
        if (umbContainer){
            umbContainer.addClass("umb-rte-editor-con-rich-text-light");
        }
       }
    }
});

Is there something that needs to be done to get umbraco to include this file?
Will umbraco not include a simple js file?
Is there a cache that can be cleared and if so where?
what options are available on the package manifest bundleOptions property?

Copy Link

Bo Jacobsen 597 posts 2395 karma points

Aug 29, 2023 @ 21:43

I am not quite sure if the backoffice actuelly loads jquery, so you could try use pure javascript.

document.addEventListener('DOMNodeInserted', function(e) {
    if (e.target.matches("div.tox-tinymce")) {
        var styleAttr = e.target.getAttribute("style");
        if (styleAttr && styleAttr.indexOf("height: 300px;") > 0) {
            var umbContainer = e.target.closest("div.umb-rte-editor-con");
            if (umbContainer) {
                umbContainer.classList.add("umb-rte-editor-con-rich-text-light");
            }
        }
    }
});

Copy Link

Jonathan L Folland 27 posts 159 karma points

Aug 30, 2023 @ 13:30
100
It turned out to be the manifest. I compared to another. I was using:
```
"js": [
    "~/App_Plugins/tweaks/js/umbraco-tweaks.js"
  ]
```
instead of:
```
"javascript": [
    "~/App_Plugins/tweaks/js/umbraco-tweaks.js"
  ]
```
Copy Link
is working on a reply...

Please Sign in or register to post replies