节点编辑对话框
节点的编辑对话框是用户配置节点以实现所需功能的主要方式。
对话框应易于使用，并且在设计和外观上与其他节点保持一致。
The edit dialog is provided in the node’s HTML file, inside a
<script type="text/html" data-template-name="node-type">
<!-- edit dialog content -->
</script>
- The
- 标签应将其
data-template-name设置为对应节点的类型。这样编辑器就能知道在编辑特定节点时显示什么内容。
编辑对话框通常由一系列行组成 - 每行包含不同属性的标签和输入框
<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>
- 每一行由一个带有
form-row类的创建 - 典型的一行会包含一个
标签，其中有一个图标和属性名称，后面跟着一个标签。图标是通过带有Font Awesome 4.7可用类名的元素创建的。 - 包含该属性的表单元素必须具有ID
node-input-。对于配置节点，ID必须为node-config-input-。 类型可以是用于字符串/数字属性的text，或是用于布尔属性的checkbox。另外，如果有一组受限的选择项，也可以使用元素。
Node-RED 提供了一些标准的UI组件，节点可以使用这些组件来创建更丰富、更一致的用户体验。
按钮
To add a button to the edit dialog, use the standard HTML element and
give it the class red-ui-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");
})
编辑准备 要在活动按钮上切换 注意：避免在 |
输入
对于简单的文本输入，可以使用标准的元素。
在某些情况下，Node-RED提供了TypedInput小部件作为替代方案。它允许用户指定属性的类型及其值。
例如，某个属性可以是字符串、数字或布尔值。或者该属性用于标识消息、流或全局上下文属性。
这是一个jQuery小部件，需要将代码添加到节点的oneditprepare函数中才能将其添加到页面。
TypedInput 控件的完整API文档，包括可用内置类型的列表，请参阅此处。
Plain HTML Input |
|
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"
})
编辑准备 When the TypedInput can be set to multiple types, an extra node property is required to store information about the type. This is added to the edit dialog as a hidden<input>.
|
TypedInput
|
HTML $("#node-input-example2").typedInput({
type:"json",
types:["json"]
})
oneditprepare The JSON type includes a button that will open up a dedicated JSON Edit Dialog (disabled in this demo). |
TypedInput
|
HTML $("#node-input-example3").typedInput({
type:"msg",
types:["msg", "flow","global"],
typeField: "#node-input-example3-type"
})
oneditprepare |
TypedInput
|
HTML $("#node-input-example4").typedInput({
types: [
{
value: "fruit",
options: [
{ value: "apple", label: "Apple"},
{ value: "banana", label: "Banana"},
{ value: "cherry", label: "Cherry"},
]
}
]
})
oneditprepare |
TypedInput
|
HTML $("#node-input-example5").typedInput({
types: [
{
value: "fruit",
multiple: "true",
options: [
{ value: "apple", label: "Apple"},
{ value: "banana", label: "Banana"},
{ value: "cherry", label: "Cherry"},
]
}
]
})
oneditprepare The resulting value of the multiple select is a comma-separated list of the selected options.
|
多行文本编辑器
Node-RED内置了一个基于Ace代码编辑器的多行文本编辑器，或者如果通过用户设置启用，也可以使用Monaco编辑器
多行文本编辑器
在以下示例中，我们将编辑的节点属性名为exampleText。
In your HTML, add a placeholder for the editor. This must have the css class
node-text-editor. You will also need to set a height on the element.
<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;
},
