Editor API

编辑器为节点和插件提供了许多 API，用于帮助它们与编辑器集成。

RED.actions

此 API 可用于在编辑器中注册和调用 Actions。作是用户可能想要触发的单个功能，可以绑定到键盘快捷键。

RED.actions API

RED.actions.add(name, handler)

注册新动作。

名称应遵循 pattern 。例如。[provider]：[name-of-action] core：show-debug-tab

1
2
3
RED.actions.add("my-custom-tab:show-custom-tab",function() {
    RED.sidebar.show("my-custom-tab");
});

RED.actions.remove(name)

删除以前注册的动作。

1
RED.actions.remove("my-custom-tab:show-custom-tab")

RED.actions.invoke(name, [args…])

按名称调用动作。

当绑定到键盘快捷键时，将不带任何参数地调用处理程序。但是当使用此 API 调用时，可以传入参数。

1
RED.actions.invoke("my-custom-tab:show-custom-tab")

RED.events API

编辑器发出组件可以监听的事件，以便它们可以根据需要做出反应。

注意：任何不在此列表中的活动都应被视为私人活动，如有更改，恕不另行通知，并且不用于一般用途。

RED.events.on(eventName, handlerFunction)

为给定事件注册新的处理程序。

1
2
3
RED.events.on("nodes:add", function(node) {
    console.log("A node has been added to the workspace!")
})

RED.events.off(eventName, handlerFunction)

删除以前注册的事件处理程序。

可用事件

工作区事件

事件 有效载荷 描述
deploy 已部署新流
login "username" 用户已登录到编辑器。如果未配置，则永远不会发出此事件adminAuth
view:selection-changed {<selection object>} 工作区中的当前选择已更改
workspace:change { old: "<previous-workspace-id>", workspace: "<new-workspace-id>" } 工作区已切换到其他选项卡
workspace:clear 工作区已被清除 - 切换项目时会发生这种情况。
workspace:dirty { dirty:<boolean> } 编辑器的脏状态已更改。“Dirty” 表示存在未部署的更改。
workspace:hide { workspace: <workspace-id> } 选项卡已被隐藏
workspace:show { workspace: <workspace-id> } 已显示以前隐藏的选项卡

流配置事件

事件 有效载荷 描述
flows:add {<flow object>} 已添加新流
flows:change {<flow object>} 流程的属性已更改
flows:remove {<flow object>} 已删除流
flows:reorder [<Array of flow ids] 流已重新排序
groups:add {<group object>} 已添加新组
groups:change {<group object>} 组的属性已更改
groups:remove {<group object>} 已删除组
links:add {<link object>} 已添加新链接
links:remove {<link object>} 已删除链接
nodes:add {<node object>} 已添加新节点
nodes:change {<node object>} 节点的属性已更改
nodes:remove {<node object>} 已删除节点
nodes:reorder {z:"<flow-id>", nodes:[<Array of node ids>]} 已在流上对节点重新排序
subflows:add {<subflow object>} 添加了新的子流
subflows:change {<subflow object>} 子流的属性已更改
subflows:remove {<subflow object>} 已删除 subflow

调色板事件

事件 有效载荷 描述
registry:module-updated {module:"<module-name>", version:"<module-version>"} 模块已更新到新版本
registry:node-set-added {<node-set object>} 新的节点集已添加到调色板中
registry:node-set-disabled {<node-set object>} 已禁用 Node Set
registry:node-set-enabled {<node-set object>} 已启用 Node Set
registry:node-set-removed {<node-set object>} 已删除 Node-Set
registry:node-type-added "node-type" 已将新节点添加到调色板中
registry:node-type-removed "node-type" 已从调色板中删除节点
registry:plugin-added "plugin-id" 已添加插件

RED.notify API

此 API 可用于显示从编辑器顶部弹出的通知。

由于这些通知会打断用户，因此应谨慎使用。

RED.notify(message, [options])

  • message- 要在通知中显示的文本
  • options- 通知的配置选项

该函数返回一个可用于交互的对象 通知。notification

配置选项

可以在参数中提供以下属性。所有这些都是可选的 options

选项 描述
type 设置通知的外观。可用值为：compact，success，warning，error。如果未设置此值，则通知使用默认的 ‘info’ 外观。
timeout 通知应显示多长时间（以毫秒为单位）。默认：5000 fixed。如果设置了该属性，则忽略此属性。
fixed 超时后不要隐藏通知。这还可以防止通知的 click-to-close 默认行为。
modal 如果设置为 true，则通知应阻止与任何其他 UI 元素交互，直到通知被关闭。
buttons 要在通知上显示的按钮数组，用于允许用户交互。

通知按钮

该选项可用于提供应在通知上显示的一组按钮 buttons

例如，要具有 ‘cancel’ 和 ‘ok’ 按钮，可以使用以下内容（请参阅下面的更完整示例）。myNotification.close()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
buttons: [
    {
        text: "cancel",
        click: function(e) {
            myNotification.close();
        }
    },
    {
        text: "okay",
        class:"primary",
        click: function(e) {
            myNotification.close();
        }
    }
]

该属性可用于为按钮指定其他 CSS 类。如果通知有多个按钮，则应有一个按钮的类设置为 to 来指示用户要单击的主按钮 class primary

通知对象

该调用返回一个对象。此对象提供以下功能：RED.notify() notification

功能 描述
notification.close() 关闭通知并将其处理。
notification.update(message, options) 替换通知的内容。

例子

普通信息通知

1
RED.notify("Hello World");

10 秒的警告通知

1
RED.notify("Something has happened", { type: "warning", timeout: 10000 });

带按钮的通知

此示例演示如何在 button 事件处理程序中使用返回的对象来关闭通知。myNotification

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
let myNotification = RED.notify("This is the message to display",{
    modal: true,
    fixed: true,
    type: 'warning',
    buttons: [
        {
            text: "cancel",
            click: function(e) {
                myNotification.close();
            }
        },
        {
            text: "okay",
            class:"primary",
            click: function(e) {
                myNotification.close();
            }
        }
    ]
});

RED.sidebar

侧边栏允许节点和插件添加自定义选项卡。

RED.sidebar API

RED.sidebar.addTab(tab)

向侧边栏添加新选项卡。

定义是具有以下属性的对象：tab

字段 描述
id 此选项卡的唯一 ID。
label 要在侧边栏选项卡上显示的文本。这应该不会太长。
name 侧边栏菜单中显示的选项卡的名称。
iconClass 要使用的图标的 FontAwesome 4 类。例如"fa fa-database"
content 包含侧边栏内容的 DOM 元素。
toolbar （可选）当此选项卡处于活动状态时，要在侧边栏工具栏中显示的 DOM 元素。
enableOnEdit （可选）如果设置为，则在编辑对话框打开时可以访问此选项卡。默认：true false
action （可选）用于显示此选项卡的已注册作的名称。这允许用户分配键盘快捷键以切换到选项卡。 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

// The sidebar content
const content = $("<div>").css({"position":"relative","height":"100%"});

// (optional) A toolbar header for the sidebar
const header = $("<div>", {class:"red-ui-sidebar-header"}).appendTo(content);


RED.actions.add("my-custom-tab:show-custom-tab",function() {
    RED.sidebar.show("my-custom-tab");
});

RED.sidebar.addTab({
    id: "my-custom-tab",
    label: "custom",
    name: "My Custom Tab",
    iconClass: "fa fa-database",
    content: content,
    action: "my-custom-tab:show-custom-tab"
});

RED.sidebar.removeTab(id)

删除选项卡（如果存在）。

如果节点将选项卡作为其函数的一部分添加，则必须确保它调用此 API 以将其作为其函数的一部分删除 onpaletteadd onpaletteremove

1
RED.sidebar.removeTab("my-custom-tab");

RED.sidebar.show(id)

在侧边栏中显示给定的选项卡（如果存在）。

1
RED.sidebar.show("my-custom-tab")

RED.sidebar.containsTab(id)

如果侧边栏中存在选项卡，则返回true

1
let debugExists = RED.sidebar.containsTab('my-custom-tab');

Widgets

有一组 jQuery 小部件可用，可在节点的编辑模板中使用。

  • TypedInput - 常规 <input> 的替代品，允许选择值的类型，包括字符串、数字和布尔值选项。广泛用于核心 Node-RED 节点。
  • EditableList - 一个可编辑列表，其中的元素本身可以是复杂的形式。由核心 Switch 和 Change 节点使用。
  • SearchBox - - 增强的 <input>，用于搜索 UX 的常见用法。
  • TreeList - 用于显示树状结构数据的列表。

Theme Plugins

自 2.0 起

可以使用主题自定义编辑器的外观。主题作为 Node-RED 插件打包和安装，然后通过 editorTheme.theme 进行选择属性。