# EditorTheme scripts

**URL:** <https://discourse.nodered.org/t/editortheme-scripts/84051>\
**Category:** General\
**Created:** [27 December 2023 10:20 UTC](https://discourse.nodered.org/t/editortheme-scripts/84051 "2023-12-27T10:20:48Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![hammeronthenet](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hammeronthenet/32/29102_2.png) [@hammeronthenet](https://discourse.nodered.org/u/hammeronthenet)\
**Post date:** [27 December 2023 10:20 UTC](https://discourse.nodered.org/t/editortheme-scripts/84051/1 "2023-12-27T10:20:49Z")

</div>

Hi all,  
I'm just discovered the possibility to extend basic editor functionality through editor theme, in particular with scripts.

I'm wondering how to do that. I didn't find any example so I've got various questions.

For example:

1. is jquery supported in my script?
2. how to attach event or monitoring them?

I made a try just with some simple code to console log on document ready, or to check if deploy button is pressed.

Something like:

```auto
$(document).on('click', '#red-ui-header-button-deploy', function() {
    // Esegui il tuo codice al click del pulsante deploy
    // parent.postMessage("Il tuo messaggio da inviare", "*");
    alert("ecco qui!");
    console.log("ecco qui!!!!");
});

$( document ).ready(function() {
    console.log( "ready!" );
});

```

I save it on a .js file, then i configure on settings.js page/scripts with an array containing the absolute path (/data/myscript.js).

But it seems nothing change.

If there's an example or somebody could gently provide me that I would be very happy. 🙂

Thanks in advance.

---

<div class="post-metadata">

**Author:** ![hammeronthenet](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hammeronthenet/32/29102_2.png) [@hammeronthenet](https://discourse.nodered.org/u/hammeronthenet)\
**Post date:** [27 December 2023 10:43 UTC](https://discourse.nodered.org/t/editortheme-scripts/84051/2 "2023-12-27T10:43:45Z")

</div>

Okay,  
I found a way to do it: really cool!

But now i'm wondering how to check if the flow was just changed or if it's already saved?  
My first impression was checking the deploy button class (if disabled or not), but I think there's a better way.

Any suggestion about this point?

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [27 December 2023 12:41 UTC](https://discourse.nodered.org/t/editortheme-scripts/84051/3 "2023-12-27T12:41:59Z")

</div>

For other people's reference, you can load additional resources to the Editor via the `editorTheme` property in settings.js, as in this example:

```auto
editorTheme: {
   // some stuff
   /** Load additional resources to the Editor page */
   page: {
       // css: '/src/nr-source/ti-theme/ti-editor-styles.css',
       scripts: '/src/nr-source/ti-theme/ti-editor-fns.js',
   },
   // more stuff
},

```

> [@hammeronthenet](#):
>
> how to check if the flow was just changed or if it's already saved

There are a number of events you should be able to use since you seem to be able to access the RED object.

`RED.events.on("runtime-state", function(event) { .. })`  
`RED.events.on("nodes:remove", function(n) { .. })`  
`RED.events.on("nodes:add", function(n) { ... })`  
`RED.events.on('deploy', function() { ... })`  
`RED.events.on('workspace:dirty', function(data) { ... })`  
`RED.events.on('nodes:change', function(data) { ... })`

---

<div class="post-metadata">

**Author:** ![hammeronthenet](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hammeronthenet/32/29102_2.png) [@hammeronthenet](https://discourse.nodered.org/u/hammeronthenet)\
**Post date:** [27 December 2023 13:52 UTC](https://discourse.nodered.org/t/editortheme-scripts/84051/4 "2023-12-27T13:52:14Z")

</div>

Perfect!

Just to share, here:

[https://nodered.org/docs/api/ui/events/](https://nodered.org/docs/api/ui/events/)

there's the list of all RED events that you can check in you script.

In my case, I just added a script like this one:

```auto
$( document ).ready(function() {
  console.log( "Additional script ready!" );

  RED.events.on('workspace:dirty', function(data) {
            if (data.dirty) console.log("Something change...");
            window.parent.postMessage({changed:data.dirty}, '*');
  })

  RED.events.on('deploy', function(data) {
            console.log("Deployed");
            window.parent.postMessage({changed:false}, '*');
  })

});

```

In this way I can use Node\_Red client inside an iFrame of the main application and, through postmessage method, share status or other changing with the main application.

Please note that probably in my case is just enough to check the "workspace:dirty" event, but for a couple of things I'll develop next I preferred to check also the "deploy" event.

Thank you @TotallyInformation .

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [10 January 2024 13:52 UTC](https://discourse.nodered.org/t/editortheme-scripts/84051/5 "2024-01-10T13:52:44Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.