Node-RED 是一个基于 Node.js 的可视化流程编程工具，由 IBM 开源，广泛应用于物联网和智能家居等领域。@node-red/editor-client 是 Node-RED 的前端 UI 库，提供了丰富的可视化组件和交互功能。本文将介绍如何使用 npm 包 @node-red/editor-client，来定制 Node-RED 的界面风格和行为。
安装 @node-red/editor-client
在 Node-RED 项目的根目录下，通过 npm 命令安装 @node-red/editor-client：
npm install --save @node-red/editor-client
安装完成后，在项目的 node_modules 目录中，可以看到 @node-red/editor-client 对应的模块文件。
使用 @node-red/editor-client
@node-red/editor-client 中的主要模块是 RED，通过它可以访问 Node-RED 的各种 UI API，如获取节点列表、插入节点、保存流程等。
在前端代码中，首先需要引入 @node-red/editor-client，然后在页面加载后初始化 RED 对象，即可开始编写界面代码：
import RED from '@node-red/editor-client';
// 初始化 RED
RED.init((_) => {
console.log('Node-RED is ready');
// 在这里开始编写界面代码
});接下来，我们介绍一些常用的 UI API：
获取节点列表
可以通过 RED.nodes.all() 方法获取当前流程中所有的节点。返回的是一个对象，键为节点 ID，值为节点的具体信息。
下面是一个获取所有节点 ID 的示例代码：
const nodes = RED.nodes.all(); const nodeIds = Object.keys(nodes); console.log(nodeIds); // 打印节点 ID 列表
创建节点
可以通过 RED.nodes.add() 方法添加新的节点。需要指定节点的类型、位置、配置等信息。
下面是一个添加一个 debug 节点的示例代码：
-- -------------------- ---- ------- --------------- --- ------------- -- -- -- ----- -------- -- ---- -- ---- -- ---- -- ---- ------ --- -- ---- -- -- -- ---- ----- -------- -- ---- ------- ----- -- ---- --------- ----- -- -------- ------ ----- -- ------- -------- ------ -- ----------- -------------- ----- -- --------- ---
修改节点
可以通过 RED.nodes.edit() 方法修改已有的节点。需要指定节点 ID 和修改的属性。
下面是一个修改 debug 节点的名称的示例代码：
RED.nodes.edit('debug-node', { name: 'debug-log' });删除节点
可以通过 RED.nodes.remove() 方法删除已有的节点。需要指定节点 ID。
下面是一个删除 debug 节点的示例代码：
RED.nodes.remove('debug-node');保存流程
可以通过 RED.view.state() 方法获取当前的流程状态，包括节点位置、连线关系、配置信息等。也可以通过 RED.view.import() 和 RED.view.export() 方法导入导出整个流程。
下面是一个导出当前流程的示例代码：
const flow = RED.view.state(); const json = RED.view.export(); console.log(json); // 打印导出的 JSON 格式流程数据
总结
使用 @node-red/editor-client 可以轻松地自定义 Node-RED 的前端界面。本文介绍了如何使用该 npm 包中的 RED 对象，访问各种 UI API，包括获取节点列表、创建、修改、删除节点等。希望本文对于 Node-RED 定制化开发有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f1e0af4403f2923b035c59a