docs • 创建节点 • .html

HTML File

The node .html file defines how the node appears with the editor. It contains three distinct part, each wrapped in its own

注册到编辑器的主节点定义。这定义了诸如面板类别、可编辑属性(defaults)以及使用的图标等内容。它位于常规的javascript脚本标签内
the edit template that defines the content of the edit dialog for the node. It is defined in a script of type text/html with data-template-name set to the type of the node.
the help text that gets displayed in the Info sidebar tab. It is defined in a script of type text/html with data-help-name set to the type of the node.

定义节点

节点必须使用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: (字符串|函数) 可选 label 用于在节点输入端口悬停时显示的标签。
outputLabels: (字符串|函数) 可选，用于在节点输出端口悬停时显示的标签。
icon: (字符串) 要使用的图标。
align: (字符串) 图标和标签的对齐方式。
button: (对象) 在节点的边缘添加一个button。
oneditprepare: (函数) 当编辑对话框正在构建时调用。参见 custom edit behaviour。
oneditsave: (函数) 当编辑对话框确认时调用。参见 custom edit behaviour。
oneditcancel: (函数) 当编辑对话框被取消时调用。参见 custom edit behaviour。
oneditdelete: (函数) 当配置节点的编辑对话框中删除按钮被按下时调用。参见 custom edit behaviour。
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>

关于编辑对话框的更多信息可在此查看。

帮助文本

当选中一个节点时，其帮助文本会显示在信息选项卡中。这应该提供关于该节点功能的明确描述，说明它会设置输出消息的哪些属性，以及可以设置输入消息的哪些属性。

第一个

标签的内容将作为悬停在节点面板上时显示的提示信息。

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

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