docs • creating nodes • .html

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',{
        // 节点定义
    });
</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> 名称</label>
        <input type="text" id="node-input-name" placeholder="名称">
    </div>
    <div class="form-tips"><b>提示：</b> 这里是为了提供帮助。</div>
</script>

有关编辑对话框的更多信息，请参见这里。

帮助文本

当选择一个节点时，其帮助文本会显示在信息标签中。这应该提供一个关于节点功能的有意义的描述。它应该说明它在出站消息上设置了哪些属性，以及可以在入站消息上设置哪些属性。

第一个 <p> 标签的内容在调色板中悬停节点时用作工具提示。

<script type="text/html" data-help-name="node-type">
   <p>一些有用的帮助文本来介绍节点。</p>
   <h3>输出</h3>
       <dl class="message-properties">
       <dt>payload
           <span class="property-type">字符串 | 缓冲区</span>
       </dt>
   <h3>详情</h3>
   <p>关于节点的更多信息。</p>
</script>

节点帮助的完整样式指南可在这里获得。