如何在Node-RED节点HTML文件中访问flow/global上下文并填充下拉框？

这个问题的核心卡点在于：Node-RED的编辑器运行在浏览器端，而node/flow/global上下文的数据存储在后端的Node.js进程中，oneditprepare函数是前端代码，没法直接读取后端的上下文。要实现需求，得通过「前端请求后端API获取上下文数据，再填充下拉框」的方式来做，具体步骤如下：

1. 在后端注册API接口，提供上下文数据 #

首先，在你的自定义节点的后端代码（.js文件）里，注册一个HTTP接口，用来读取并返回上下文数据。这里分三种上下文场景：

场景1：获取flow级上下文数据 #

module.exports = function(RED) {
    function CustomDropdownNode(config) {
        RED.nodes.createNode(this, config);
        const node = this;

        // 注册供编辑器调用的API，添加权限保护
        RED.httpAdmin.get(
            '/custom-dropdown/get-flow-context',
            RED.auth.needsPermission('custom-dropdown.read'),
            function(req, res) {
                // 读取flow上下文里预存的下拉选项数组
                const flowContext = node.context().flow;
                const dropdownOptions = flowContext.get('myDropdownOptions') || [];
                res.json(dropdownOptions);
            }
        );
    }
    RED.nodes.registerType("custom-dropdown", CustomDropdownNode);
}

场景2：获取global级上下文数据 #

把上面的node.context().flow换成RED.util.getGlobalContext()即可：

const globalContext = RED.util.getGlobalContext();
const dropdownOptions = globalContext.get('myGlobalDropdownOptions') || [];

场景3：获取当前节点的私有上下文数据 #

如果要读取当前节点自己的上下文，需要在API路径里带上节点ID，后端通过ID找到对应节点：

RED.httpAdmin.get(
    '/custom-dropdown/get-node-context/:nodeId',
    RED.auth.needsPermission('custom-dropdown.read'),
    function(req, res) {
        const targetNode = RED.nodes.getNode(req.params.nodeId);
        if (!targetNode) {
            return res.status(404).json({error: "目标节点不存在"});
        }
        const nodeContext = targetNode.context();
        const dropdownOptions = nodeContext.get('myNodeDropdownOptions') || [];
        res.json(dropdownOptions);
    }
);

2. 在前端oneditprepare中请求API并填充下拉框 #

在节点的前端编辑器代码（.html文件）里，通过fetch请求刚才的API，拿到数据后更新下拉框：

对应flow/global上下文的示例 #

<script type="text/javascript">
    RED.nodes.registerType('custom-dropdown',{
        category: 'custom',
        defaults: {
            selectedOption: {value: ""}
        },
        oneditprepare: function() {
            // 请求后端API获取上下文数据
            fetch('/custom-dropdown/get-flow-context')
                .then(response => response.json())
                .then(options => {
                    const dropdownEl = $('#node-input-selectedOption');
                    // 清空原有选项
                    dropdownEl.empty();
                    // 批量添加新选项（假设options是[{value: "val1", label: "选项1"}, ...]格式）
                    options.forEach(opt => {
                        dropdownEl.append(
                            $('<option></option>')
                                .attr('value', opt.value)
                                .text(opt.label)
                        );
                    });
                    // 恢复节点已保存的选中值
                    if (this.selectedOption) {
                        dropdownEl.val(this.selectedOption);
                    }
                })
                .catch(err => {
                    console.error("加载下拉选项失败：", err);
                });
        }
    });
</script>

对应节点私有上下文的示例 #

只需要修改请求URL，带上当前节点的ID：

fetch(`/custom-dropdown/get-node-context/${this.id}`)
// 后续处理逻辑同上

3. 注意事项 #

• 权限控制：一定要给API加上权限验证（比如RED.auth.needsPermission），避免未授权的访问。
• 数据格式：确保上下文里存储的下拉选项是标准格式（比如包含value和label字段），方便前端渲染。
• 错误处理：前端要做好请求失败的容错，避免编辑器因为API报错而卡死。

内容的提问来源于stack exchange，提问作者Mahesh J