HTML 文件

节点 .html 文件定义了节点在编辑器中的显示方式。它包含三个不同的部分，每个部分都包含在自己的 <script> 标签中

注册到编辑器的主要节点定义。这定义了诸如调色板类别、可编辑属性 (defaults) 以及要使用的图标等内容。它位于常规的javascript脚本标签中
编辑模板，定义了节点的编辑对话框的内容。它定义在类型为 text/html 的脚本中，其 data-template-name 设置为节点的类型。
帮助文本，显示在信息侧边栏选项卡中。它定义在类型为 text/html 的脚本中，其 data-help-name 设置为节点的类型。

定义节点

节点必须使用 RED.nodes.registerType 函数注册到编辑器。

此函数接受两个参数：节点的类型及其定义

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

节点类型

节点类型在整个编辑器中用于标识节点。它必须与相应 .js 文件中对 RED.nodes.registerType 的调用所使用的值匹配。

节点定义

节点定义包含编辑器所需的所有节点信息。它是一个包含以下属性的对象

category：（字符串）节点出现在哪个调色板类别中
defaults：（对象）节点的可编辑属性。
credentials：（对象）节点的凭据属性。
inputs：（数字）节点有多少个输入，可以是 0 或 1。
outputs：（数字）节点有多少个输出。可以是 0 或更多。
color：（字符串）要使用的背景颜色。
paletteLabel：（字符串|函数）在调色板中使用的标签。
label：（字符串|函数）在工作区中使用的标签。
labelStyle：（字符串|函数）应用于标签的样式。
inputLabels：（字符串|函数）可选的标签，鼠标悬停在节点的输入端口上时添加。
outputLabels：（字符串|函数）可选的标签，鼠标悬停在节点的输出端口上时添加。
icon：（字符串）要使用的图标。
align：（字符串）图标和标签的对齐方式。
button：（对象）在节点边缘添加一个按钮。
oneditprepare：（函数）在构建编辑对话框时调用。参见自定义编辑行为。
oneditsave：（函数）在编辑对话框确定时调用。参见自定义编辑行为。
oneditcancel：（函数）在编辑对话框取消时调用。参见自定义编辑行为。
oneditdelete：（函数）当配置节点的编辑对话框中的删除按钮被按下时调用。参见自定义编辑行为。
oneditresize：（函数）在编辑对话框调整大小时调用。参见自定义编辑行为。
onpaletteadd：（函数）当节点类型添加到调色板时调用。
onpaletteremove：（函数）当节点类型从调色板中移除时调用。

编辑对话框

节点的编辑模板描述了其编辑对话框的内容。

<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>

完整的节点帮助样式指南可在此处获取。