节点编辑对话框
节点的编辑对话框是用户配置节点以实现所需功能的主要方式。
对话框应具有直观的使用体验，并在设计和外观上与其他节点保持一致。
编辑对话框在 节点的 HTML 文件 中提供，位于一个 <script> 标签内：
<script type="text/html" data-template-name="node-type">
<!-- 编辑对话框内容 -->
</script>
<script>标签的type应为text/html- 这将帮助大多数文本编辑器提供正确的语法高亮。它还可以防止浏览器在节点加载到编辑器时将其视为普通 HTML 内容。- 该标签的
data-template-name应设置为其编辑对话框对应的节点类型。这是编辑器在编辑特定节点时识别显示内容的方式。
编辑对话框通常由一系列行组成，每行包含一个标签和一个不同属性的输入框。
<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>
- 每一行由一个 class 为
form-row的<div>创建。 - 一个典型的行将包含一个
<label>，其中包含一个图标和属性名称，后面跟着一个<input>。图标使用一个<i>元素创建，并从 Font Awesome 4.7 中获取类名。 - 包含该属性的表单元素必须具有
node-input-<propertyname>的 id。对于配置节点，id 必须为node-config-input-<property-name>。 <input>类型可以是用于字符串/数字属性的text，或者用于布尔属性的checkbox。或者，如果存在限制的选择集，可以使用<select>元素。
Node-RED 提供一些标准的 UI 小部件，供节点使用，以创建更丰富和一致的用户体验。
按钮
要将按钮添加到编辑对话框，请使用标准 <button> HTML 元素，并赋予它 class red-ui-button。
普通按钮 |
<button type="button" class="red-ui-button">按钮</button> |
小按钮 |
<button type="button" class="red-ui-button red-ui-button-small">按钮</button> |
切换按钮组 |
<span class="button-group"> <button type="button" class="red-ui-button toggle selected my-button-group">b1</button><button type="button" class="red-ui-button toggle my-button-group">b2</button><button type="button" class="red-ui-button toggle my-button-group">b3</button> </span> HTML $(".my-button-group").on("click", function() {
$(".my-button-group").removeClass("selected");
$(this).addClass("selected");
})
oneditprepare 要在活动按钮上切换 注意： 避免在 |
输入
对于简单的文本输入，可以使用标准的 <input> 元素。
在某些情况下，Node-RED 提供 TypedInput 小部件作为替代方案。它允许用户指定属性的类型及其值。
例如，如果一个属性可以是字符串、数字或布尔值。或者如果该属性用于标识消息、流或全局上下文属性。
这是一个 jQuery 小部件，需要在节点的 oneditprepare 函数中添加代码以将其添加到页面。
TypedInput 小部件的完整 API 文档，包括可用内置类型的列表，可以在 这里 找到。
普通 HTML 输入 |
<input type="text" id="node-input-name"> |
TypedInput
|
<input type="text" id="node-input-example1"> <input type="hidden" id="node-input-example1-type"> HTML $("#node-input-example1").typedInput({
type:"str",
types:["str","num","bool"],
typeField: "#node-input-example1-type"
})
oneditprepare 当 TypedInput 可以设置为多种类型时，需要额外的节点属性来存储关于该类型的信息。这个属性作为一个隐藏的<input> 添加到编辑对话框中。
|
TypedInput
|
<input type="text" id="node-input-example2"> HTML $("#node-input-example2").typedInput({
type:"json",
types:["json"]
})
oneditprepare JSON 类型包括一个按钮，可以打开一个专用的 JSON 编辑对话框（在此演示中禁用）。 |
TypedInput
|
<input type="text" id="node-input-example3"> <input type="hidden" id="node-input-example3-type"> HTML $("#node-input-example3").typedInput({
type:"msg",
types:["msg", "flow","global"],
typeField: "#node-input-example3-type"
})
oneditprepare |
TypedInput
|
<input type="text" id="node-input-example4"> HTML $("#node-input-example4").typedInput({
types: [
{
value: "fruit",
options: [
{ value: "apple", label: "苹果"},
{ value: "banana", label: "香蕉"},
{ value: "cherry", label: "樱桃"},
]
}
]
})
oneditprepare |
TypedInput
|
<input type="text" id="node-input-example5"> HTML $("#node-input-example5").typedInput({
types: [
{
value: "fruit",
multiple: "true",
options: [
{ value: "apple", label: "苹果"},
{ value: "banana", label: "香蕉"},
{ value: "cherry", label: "樱桃"},
]
}
]
})
oneditprepare 多选框的结果值是所选选项的以逗号分隔的列表。
|
多行文本编辑器
Node-RED 包括一个基于 Ace 代码编辑器 的多行文本编辑器，或者如果通过用户设置启用，则为 Monaco 编辑器
多行文本编辑器
在以下示例中，我们要编辑的节点属性名为 exampleText。
在您的 HTML 中，添加一个 <div> 占位符作为编辑器。这必须具有 css 类 node-text-editor。您还需要在该元素上设置 height。
<div style="height: 250px; min-height:150px;" class="node-text-editor" id="node-input-example-editor"></div>
在节点的 oneditprepare 函数中，使用 RED.editor.createEditor 函数初始化文本编辑器：
this.editor = RED.editor.createEditor({
id: 'node-input-example-editor',
mode: 'ace/mode/text',
value: this.exampleText
});
oneditsave 和 oneditcancel 函数也需要在对话框关闭时从编辑器获取值，并确保编辑器正确从页面中移除。
oneditsave: function() {
this.exampleText = this.editor.getValue();
this.editor.destroy();
delete this.editor;
},
oneditcancel: function() {
this.editor.destroy();
delete this.editor;
},
