- 1. 前言
- 2. button
- 3. 输入框
- 4. 多行Text域
- 5. 总结
前言
最近有读者通过博客向我咨询，在Customizationnode-red节点时，如何编写该节点的配置页面，就是我们通常见到的，双节节点打开的信息弹窗。如下图：
上面两张图，展示了inject节点与mqtt in 节点的配置弹窗。
在弹窗中，除了上面的Delete，Cancel，Complete，和下面的失效button。
中间部分都是需要developer自己编写的。
你需要什么button，需要哪些输入框，还有Text域。
节点配置弹窗是用户配置，修改节点配置data的主要方式。
下面就教大家如何编写这部分的页面
配置弹窗是编写在 节点的html 文件里 并且写在
<script type="text/html" data-template-name="node-type">
<!-- edit dialog content -->
</script>注意scriptTags的 type属性 必须配置为 text/html，这能够帮助Edit器高亮识别js语法。
Tags还应该包含data-template-name 属性，表面该Script是应用于那个节点Type。
你可以在这里编写html,
如下：
<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>
以上是一个用于输入名字的输入框。有些class是可以直接使用官方的，比如form-row ，该class会帮你创建一个块级元素，将信息展示一行一行地展示。
除了developer自己编写css 和 html，node-red官方也提供了一些标准的组件供大家使用。
使用他们编写节点配置弹窗，会更美观，简约，也会很符合node-red的整体风格。
下面一起来看一下。
button
由于button经常被用到，所有官方提供了一套标准的button组件。
你可以这样使用
<button type="button" class="red-ui-button">Button</button> <button type="button" class="red-ui-button red-ui-button-small">Button</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>
以上代码的显示button
输入框
如果你要使用输入框的话，可以看看官方提供的案例
Plain HTML Input <input type="text" id="node-input-name"> TypedInput String/Number/Boolean <input type="text" id="node-input-example1"> <input type="hidden" id="node-input-example1-type"> TypedInput JSON <input type="text" id="node-input-example2"> TypedInput msg/flow/global <input type="text" id="node-input-example3"> <input type="hidden" id="node-input-example3-type">
如果你要使用选择框
<input type="text" id="node-input-example5">
$("#node-input-example5").typedInput({
types: [
{
value: "fruit",
multiple: "true",
options: [
{ value: "apple", label: "Apple"},
{ value: "banana", label: "Banana"},
{ value: "cherry", label: "Cherry"},
]
}
]
})
它就会表现成这样子。
多行Text域
在node-red中多行Text域其实都是 使用的代码Edit器，使用monaco或者ace
你可以这样使用
<div style="height: 250px; min-height:150px;" class="node-text-editor" id="node-input-example-editor"></div>
// 使用RED.editor.createEditor 方法创建Edit器，
this.editor = RED.editor.createEditor({
id: 'node-input-example-editor',
mode: 'ace/mode/text',
value: this.exampleText
});
// 在保存或Cancel时，销毁无用的对象，释放资源
oneditsave: function() {
this.exampleText = this.editor.getValue();
this.editor.destroy();
delete this.editor;
},
oneditcancel: function() {
this.editor.destroy();
delete this.editor;
},
Edit器效果
总结
node-red提供的Customization节点Function，让我们可以自由地制作各种各样的节点来满足自己的需要。
之前有个读者说他们要在node-red中做直播会议system，非常佩服这些人的创造力。
要想更快，更好地开发出好用的节点，需要把基本功打好，万丈大楼先把地基打好。你学会啦吗？
Markdown 2920 字数 130 行数 当前行 129, 当前列 36 文章已保存18:18:05
请问怎么赋值data到form里面呢