HTMLファイル

.htmlファイルは、エディタでのノード表示方法を定義します。３つの種類があり、それぞれ独自の<script>タグで囲まれています:

エディタに登録されるメインノード定義。ここにはパレットカテゴリ、編集可能なプロパティ（defaults）、使用するアイコンなどを定義します。一般的なjavascriptのscriptタグ内に記述します。
ノードの編集ダイアログの内容を定義するテンプレート。これはdata-template-nameにノードのタイプが設定された text/htmlというtypeを持っているscriptタグ内に定義されます。
情報サイドバータブに表示されるヘルプテキスト。これはdata-help-nameにノードのタイプが設定された text/htmlというtypeを持つscriptタグ内で定義されています。

ノードを定義する

ノードはRED.nodes.registerType関数を利用して登録しなければなりません。

この関数は、ノードタイプとその定義という2つの引数が必要です:

<script type="text/javascript">
    RED.nodes.registerType('node-type',{
        // node definition
    });
</script>

ノードのタイプ

ノードタイプはノードを識別するためエディタ全体で使用します。対応する.jsファイルのRED.nodes.registerTypeへの呼び出しで使用される値と一致しなければなりません。

ノードの定義

ノード定義には、エディタに必要なノードに関するすべての情報が含まれています。これは次のプロパティを持つオブジェクトです:

category: (string) ノードが表示されるパレットカテゴリ
defaults: (object) ノードのプロパティの編集
credentials: (object) ノードの認証プロパティ
inputs: (number) ノードがいくつの入力を有するか、0または1のどちらか
outputs: (number) ノードがいくつの出力を有するか、0またはそれ以上にすることができます
color: (string) 使用する背景色
paletteLabel: (string|function) パレットで使用するラベル
label: (string|function) ワークスペースで使用するラベル
labelStyle: (string|function) ラベルに適用するスタイル
inputLabels: (string|function) ノードの入力ポートにマウスホバーした際に追加表示されるオプションのラベル
outputLabels: (string|function) ノードの出力ポートにマウスホバーした際に追加表示されるオプションのラベル
icon: (string) 使用するアイコン
align: (string) アイコンとラベルの整列
button: (object) ボタンをノードのエッジに追加する
oneditprepare: (function) 編集ダイアログが作成されている時に呼び出されます。カスタム編集の動作を参照してください。
oneditsave: (function) 編集ダイアログで完了ボタンが押された時に呼び出されます。カスタム編集の動作を参照してください。
oneditcancel: (function) 編集ダイアログがキャンセルボタンが押された時に呼び出されます。カスタム編集の動作を参照してください。
oneditdelete: (function) 設定ノードの編集ダイアログの削除ボタンが押された時に呼び出されます。カスタム編集の動作を参照してください。
oneditresize: (function) 編集ダイアログがリサイズされた時に呼び出されます。カスタム編集の動作を参照してください。
onpaletteadd: (function) ノードタイプがパレットに追加された時に呼び出されます。
onpaletteremove: (function) ノードタイプがパレットから削除されたときに呼び出されます。

ダイアログの編集

ノードの編集テンプレートは編集ダイアログの内容を記述します。

<script type="text/html" data-template-name="node-type">
    <div class="form-row">
        <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
        <input type="text" id="node-input-name" placeholder="Name">
    </div>
    <div class="form-tips"><b>Tip:</b> This is here to help.</div>
</script>

編集ダイアログについてのさらなる情報はこちらで入手できます。

ヘルプテキスト

ノードが選択されると、ヘルプテキストが情報タブに表示されます。選択されたノードが何をするかについて有意義な説明を提供する必要があります。ここでは、送信メッセージにどのようなプロパティを設定できるか、受信メッセージにどのプロパティを設定できるかを明示する必要があります。

最初の<p>タグの内容は、パレット内のノードにマウスホバーしたときにツールチップとして使用されます。

<script type="text/html" data-help-name="node-type">
   <p>Some useful help text to introduce the node.</p>
   <h3>Outputs</h3>
       <dl class="message-properties">
       <dt>payload
           <span class="property-type">string | buffer</span>
       </dt>
   <h3>Details</h3>
   <p>Some more information about the node.</p>
</script>

ノードのヘルプの全スタイルガイドはこちらで参照できます。