Node-RED学习笔记——HTML 文件

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

1. 节点定义：向编辑器注册的主节点定义，定义调色板类别、可编辑属性和要使用的图标等。它在常规 javascript 脚本标记中defaults

2. 编辑对话框 data-template-name：定义节点编辑对话框内容的编辑模板。type="text/html" data-template-name="node-type"

3. 帮助文本 data-help-name：显示在"信息边栏"选项卡中的帮助文本。type="text/html" data-help-name="node-type"

定义节点

使用 RED.nodes.registerType函数向编辑器注册节点。此函数采用两个参数：节点的类型及其定义

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

节点类型

节点类型在整个编辑器中用于标识节点。它必须和 js文件名一致。如，node-type.js

节点定义

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

• category： （字符串） Node-red界面操作面板中节点类别
• defaults：（对象）节点的可编辑属性
• credentials：（对象）节点的凭据属性
• inputs：（数字）节点的输入数
• outputs：（数字）节点的输出数
• 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>

帮助文本

选择节点时，其帮助文本将显示在信息选项卡中，提供节点操作的描述。包括在传出消息上设置的属性，以及可以在传入消息上设置哪些属性。

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