keys-node.html

<script type="text/x-red" data-template-name="KEYS">
  <div class="form-row">
    <label for="node-input-name"><i class="icon-tag"></i> Name</label>
    <input type="text" id="node-input-name" placeholder="KEYS">
  </div>

  <div class="form-row" style="position: relative; margin-bottom: 0px;">
    <label for="node-input-source"><i class="fa fa-file-code-o"></i> KEYS</label>
    <input type="hidden" id="node-input-source" autofocus="autofocus">
    <div style="position: absolute; right:0;display:inline-block; text-align: right; font-size: 0.8em;">
        Format:
        <select id="node-input-format" style="width:110px; font-size: 10px !important;  height: 24px; padding:0;">
            <option value="json">json</option>
            <option value="text">text</option>
        </select>
    </div>
  </div>
  
  <div class="form-row node-text-editor-row">
      <div style="height: 250px; min-height:150px;" class="node-text-editor" id="node-input-editor" ></div>
  </div>
</script>

<script type="text/javascript">
  RED.nodes.registerType('KEYS', {
    category: 'crypto',
    color: '#FDF0C2',
    defaults: {
      name: { value: "" },
      format: { value: "json" },
      source: { value: "" },
    },
    inputs: 1,
    outputs: 1,
    icon: "zenroom.png",
    label: function () {
      return this.name || "KEYS"
    },
    labelStyle: function () {
      return this.name ? "node_label_italic" : ""
    },
    oneditprepare: function () {
      var that = this;

      this.editor = RED.editor.createEditor({
        id: 'node-input-editor',
        mode: 'ace/mode/javascript',
        value: $("#node-input-source").val()
      });

      this.editor.focus();
      $("#node-input-format").change(function () {
        var mod = "ace/mode/" + $("#node-input-format").val();
        that.editor.getSession().setMode({
          path: mod,
          v: Date.now()
        });
      });
    },
    oneditsave: function () {
      $("#node-input-source").val(this.editor.getValue());
      this.editor.destroy();
      delete this.editor;
    },
    oneditcancel: function () {
      this.editor.destroy();
      delete this.editor;
    },
    oneditresize: function (size) {
      var rows = $("#dialog-form>div:not(.node-text-editor-row)");
      var height = $("#dialog-form").height();
      for (var i = 0; i < rows.size(); i++) {
        height -= $(rows[i]).outerHeight(true);
      }
      var editorRow = $("#dialog-form>div.node-text-editor-row");
      height -= (parseInt(editorRow.css("marginTop")) + parseInt(editorRow.css("marginBottom")));
      $(".node-text-editor").css("height", height + "px");
      this.editor.resize();
    }
  });
</script>

<script type="text/x-red" data-help-name="KEYS">
  <p>A simple node that get a input and send it to zencode node or the json buffer as a input</p>
  <h3>Outputs</h3>
  <dl class="message-properties">
  <dt>payload
      <span class="property-type">json | buffer</span>
  </dt>
  <h3>Details</h3>
  <p>Some more information about the node.</p>
</script>