# Bug in multi-line editor docs

**URL:** <https://discourse.nodered.org/t/bug-in-multi-line-editor-docs/59499>\
**Category:** Developing Nodes\
**Created:** [7 March 2022 16:11 UTC](https://discourse.nodered.org/t/bug-in-multi-line-editor-docs/59499 "2022-03-07T16:11:34Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![tve](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/tve/32/59475_2.png) [@tve](https://discourse.nodered.org/u/tve)\
**Post date:** [7 March 2022 16:11 UTC](https://discourse.nodered.org/t/bug-in-multi-line-editor-docs/59499/1 "2022-03-07T16:11:34Z")

</div>

There's a bug in the multiline editor doc [Node edit dialog : Node-RED](https://nodered.org/docs/creating-nodes/edit-dialog#multi-line-text-editor), specifically, it shows:

```javascript
oneditsave: function() {
    this.exampleText = this.editor.getValue();
    this.editor.destroy();
    delete this.editor;
},

```

As far as I can tell, `this.exampleText = this.editor.getValue();` is a no-op. It should be

```auto
$('#node-input-example-editor').val(this.editor.getValue())

```

It would also have been great to provide a hint about vertical auto-sizing. I gathered the following from looking at the function node source:

```javascript
    oneditresize(size) {
      const rows = $("#dialog-form>div:not(.node-text-editor-row)");
      let height = $("#dialog-form").height();
      for (var i=0; i<rows.length; i++) {
          height -= $(rows[i]).outerHeight(true);
      }
      var editorRow = $("#dialog-form>div.node-text-editor-row");
      height -= (parseInt(editorRow.css("marginTop"))+parseInt(editorRow.css("marginBottom")));
      $("#dialog-form .node-text-editor").css("height", height+"px");

      this.editor.resize();
    },

```

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [7 March 2022 16:19 UTC](https://discourse.nodered.org/t/bug-in-multi-line-editor-docs/59499/2 "2022-03-07T16:19:53Z")

</div>

Can you show me the code that creates node.editor in your `oneditprepare`? It should not be a no-op function, it should call to the ACE or MONACO internal equivalent function.

---

<div class="post-metadata">

**Author:** ![tve](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/tve/32/59475_2.png) [@tve](https://discourse.nodered.org/u/tve)\
**Post date:** [7 March 2022 16:28 UTC](https://discourse.nodered.org/t/bug-in-multi-line-editor-docs/59499/3 "2022-03-07T16:28:29Z")

</div>

```auto
    oneditprepare() {
      this.editor = RED.editor.createEditor({
        id: 'node-input-source',
        mode: 'ace/mode/text',
        value: this.source
      })
    },

```

Full source: [node-red-fd-testnodes/testcustom.html at main · flexdash/node-red-fd-testnodes · GitHub](https://github.com/flexdash/node-red-fd-testnodes/blob/main/testcustom.html#L63-L117)

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [7 March 2022 16:47 UTC](https://discourse.nodered.org/t/bug-in-multi-line-editor-docs/59499/4 "2022-03-07T16:47:51Z")

</div>

Your variable (in the defaults) is different to the example so you should write

```auto
this.source = this.editor.getValue();

```

---

<div class="post-metadata">

**Author:** ![tve](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/tve/32/59475_2.png) [@tve](https://discourse.nodered.org/u/tve)\
**Post date:** [7 March 2022 16:50 UTC](https://discourse.nodered.org/t/bug-in-multi-line-editor-docs/59499/5 "2022-03-07T16:50:30Z")

</div>

Yup, that's what I tried and it's a no-op. You don't end up with the modified editor content.

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [7 March 2022 17:29 UTC](https://discourse.nodered.org/t/bug-in-multi-line-editor-docs/59499/6 "2022-03-07T17:29:03Z")

</div>

> [@tve](#):
>
> You don't end up with the modified editor content.

Could you add `console.log("editor", this.editor, this.editor.getValue())`  
Restart node-red  
Edit your node (change the text)  
Press "Done"  
Check the console?

---

<div class="post-metadata">

**Author:** ![tve](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/tve/32/59475_2.png) [@tve](https://discourse.nodered.org/u/tve)\
**Post date:** [7 March 2022 17:54 UTC](https://discourse.nodered.org/t/bug-in-multi-line-editor-docs/59499/7 "2022-03-07T17:54:24Z")

</div>

I can, but `this.editor.getValue()` is not the problem, it does return the modified content. The problem is that the assignment to `this.source` doesn't do anything.

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [7 March 2022 18:01 UTC](https://discourse.nodered.org/t/bug-in-multi-line-editor-docs/59499/8 "2022-03-07T18:01:08Z")

</div>

Could that be because you have no (hidden) html element with id "node-input-source"?

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [7 March 2022 18:05 UTC](https://discourse.nodered.org/t/bug-in-multi-line-editor-docs/59499/9 "2022-03-07T18:05:19Z")

</div>

OK, that is the distinction I was trying to make.

As for why the sample & my suggestion it doesnt work for you but does work for me, the only difference i see is the default var setup.

In MSSQL-PLUS the default is

```auto
 query: {
                value: ''
            }

```

and the `oneditsave` is `this.query = this.editor.getValue();`

Could you try that?

---

<div class="post-metadata">

**Author:** ![tve](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/tve/32/59475_2.png) [@tve](https://discourse.nodered.org/u/tve)\
**Post date:** [7 March 2022 18:06 UTC](https://discourse.nodered.org/t/bug-in-multi-line-editor-docs/59499/10 "2022-03-07T18:06:53Z")

</div>

Let's try something else... Do you know of any simple node that uses multi-line editor? I looked at the [function node](https://github.com/node-red/node-red/blob/master/packages/node_modules/@node-red/nodes/core/function/10-function.html#L566)) and that's where I got the

```auto
$('#node-input-example-editor').val(this.editor.getValue())

```

phrase from.

I'm wondering whether the _after_ the oneditsave the editor itself copies the values from the input fields into `this`, thereby overwriting `this.source`. Either way, what's in the docs doesn't work.

---

<div class="post-metadata">

**Author:** ![tve](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/tve/32/59475_2.png) [@tve](https://discourse.nodered.org/u/tve)\
**Post date:** [7 March 2022 18:07 UTC](https://discourse.nodered.org/t/bug-in-multi-line-editor-docs/59499/11 "2022-03-07T18:07:29Z")

</div>

> [@Steve-Mcl](#):
>
> As for why the sample & my suggestion it doesnt work for you but does work for me

Can you paste your complete node or point to it?

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [7 March 2022 18:09 UTC](https://discourse.nodered.org/t/bug-in-multi-line-editor-docs/59499/12 "2022-03-07T18:09:45Z")

</div>

Actually, it is BECAUSE you have set the id of the div to `node-input-source` : [node-red-fd-testnodes/testcustom.html at 2908532360a7e7b0e5f37b7118c0f4033e436ee8 · flexdash/node-red-fd-testnodes · GitHub](https://github.com/flexdash/node-red-fd-testnodes/blob/2908532360a7e7b0e5f37b7118c0f4033e436ee8/testcustom.html#L136)

change that to `node-input-source-editor` (or something else) & also change the `id:` in `oneditprepare`--\> `this.editor = RED.editor.createEditor` to match

then you can use `this.source = this.editor.getValue();`

---

<div class="post-metadata">

**Author:** ![tve](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/tve/32/59475_2.png) [@tve](https://discourse.nodered.org/u/tve)\
**Post date:** [7 March 2022 18:11 UTC](https://discourse.nodered.org/t/bug-in-multi-line-editor-docs/59499/13 "2022-03-07T18:11:24Z")

</div>

I see, ughhh. Thanks for the help!!

Part of the problem is that the docs don't describe at all in what context the onedit\* functions run. What is `this` bound to? What happens in the editor itself before & after each one of these callbacks?

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [7 March 2022 18:36 UTC](https://discourse.nodered.org/t/bug-in-multi-line-editor-docs/59499/14 "2022-03-07T18:36:50Z")

</div>

> [@tve](#):
>
> Part of the problem is that the docs don't describe at all in what context the onedit\* functions run

[https://nodered.org/docs/creating-nodes/properties](https://nodered.org/docs/creating-nodes/properties)

> [@tve](#):
>
> What is `this` bound to?

The node. Typically, at the start of `oneditprepare` and `oneditsave` I put `const node = this` then everywhere in the code i write `node.query = xxx;` This way, i need not worry about scope or callbacks affecting `this`

> [@tve](#):
>
> What happens in the editor itself before & after each one of these callbacks?

Lots. Too much to describe & not (completely) documented but in simple terms, it generates the form, links up the variables to `id`s and hooks up events.

* * *

Is your issue fixed? Please mark the solution if so.

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [7 March 2022 18:43 UTC](https://discourse.nodered.org/t/bug-in-multi-line-editor-docs/59499/15 "2022-03-07T18:43:16Z")

</div>

> [@Steve-Mcl](#):
>
> it is BECAUSE you have set the id

Ah yes of course. Good catch! I remembered that I had similar issues in the past with the blockly node, but it had become a bit blurred in my head...

---

<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:** [21 March 2022 18:43 UTC](https://discourse.nodered.org/t/bug-in-multi-line-editor-docs/59499/16 "2022-03-21T18:43:59Z")

</div>

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