How to set Node RED editor at runtime?

Developing Nodes
1

Hi all,

How to set Node RED editor at runtime?

At first I created custom Node. Then I use Node Red editor for "MyText" input value. Then I use validate "MyText" by using function.

If validation is invalid, I want to set editor style, such as, changing border color.

Please advise me.

Thank you very much.

2

Slightly hard to decypher your question. But if I've understood correctly, you want to change visuals on the settings panel of your custom node in the Editor based on validating the user input?

Firstly note that the editor already changes the border colour to red for invalid fields. However, that is fairly subtle.

To do more, note that you have access to jQuery in the Editor. So you can use the features of jQuery to dynamically set CSS and/or STYLE for any element. You can also use jQuery to show/hide elements or even dynamically add/remove them.

3

Thank you very much for your advise.
That is my purpose.
Sorry for my question that was hard to read. :sweat:

Now I can add css class to the Editor by using Ace Edtor API 'setStyle'.

Thank you very much again :blush:

4

You should not call ACE functions or properties directly.

The reason being: it is not abstracted by node-red and when ACE is updated/removed etc your node will stop working.

Additionally, ACE may one day be relegated (or even removed) in favour of the newer Monaco editor that is now provided in node-red V2+

1 Like
5

Thank you very much for your advise. :slightly_smiling_face:

Do you have "Monaco editor" usage with Node-Red document? :thinking:

Now, I follow example document for my custom Node development.

Below code, it is create 'ace' editor, but I don't know how create 'Monaco' editor.

this.editor = RED.editor.createEditor({
   id: 'node-input-example-editor',
   mode: 'ace/mode/text',
   value: this.exampleText
});

Moreover, I am not sure, if I use 'Monaco', can I call 'Monaco' functions or properties directly?

Because, I want to emit display from editor, if user does not input anything in the editor.

Please advise me more.

6

↑ This works for both ACE and MONACO ​- without any changes (the ACE mode is automatically translated into the correct value for MONACO). It is down to how the users settings.js is configured. If the user has chosen ACE (default) then an ACE editor is created. If the user has MONACO set, then your code will create a MONACO editor.



Again, you should avoid this.

where as RED.editor.createEditor is a node-red API and therefore OK to call.

However, there is no real reason to do this. Set the node property that the code is saved in to be a required property - then the node-red editor will place an error badge on the node.

Likewise, you could have some logic in the oneditsave callback that checks the value and alerts the user.

If you MUST you could simply set the style of an outer DIV or something else.



Final comments:

As you have selected text mode - why even bother with ACE or MONACO - why not use a simple textarea element. Then you can set its colour / style as much as you want.

7

I will change from Editor to textarea, and the other from your advise.

Thank you very much for your advise again. :blush:

8

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