在自定义 TimyMCE 按钮中构建动态菜单项

Question

我正在使用 TinyMCE 反应组件来加载编辑器。我正在尝试添加一个自定义菜单项，并且其中一个文档示例运行良好。但是，我正在尝试在此自定义菜单按钮中动态构建菜单项。这是工作示例：

<Editor
            apiKey='123'
            onChange={(e) => this.handleDirty(e)}
            onInit={(evt, editor) => this.editorRef.current = editor}
            initialValue={this.renderInputValue('body')}
            init={{
                height: 600,
                menubar: true,
                plugins: [
                    'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'preview',
                    'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen',
                    'insertdatetime', 'media', 'table', 'code', 'help', 'wordcount'
                ],
                toolbar: 'undo redo | blocks | ' +
                    'bold italic forecolor | alignleft aligncenter ' +
                    'alignright alignjustify | bullist numlist outdent indent | ' +
                    'removeformat | insertvarbutton help',
                setup: function (editor) {
                    /* Menu items are recreated when the menu is closed and opened, so we need
                       a variable to store the toggle menu item state. */
                    var toggleState = false;

                    /* example, adding a toolbar menu button */
                    editor.ui.registry.addMenuButton('insertvarbutton', {
                        text: 'Insert Variable',
                        fetch: function (callback) {
                            let test = []
                            let items = [
                                {
                                    type: 'menuitem',
                                    text: 'Menu item 1',
                                    onAction: function () {
                                        editor.insertContent('&nbsp;<em>You clicked menu item 1!</em>');
                                    }
                                },
                                {
                                    type: 'nestedmenuitem',
                                    text: 'Menu item 2',
                                    icon: 'user',
                                    getSubmenuItems: function () {
                                        return [
                                            {
                                                type: 'menuitem',
                                                text: 'Sub menu item 1',
                                                icon: 'unlock',
                                                onAction: function () {
                                                    editor.insertContent('&nbsp;<em>You clicked Sub menu item 1!</em>');
                                                }
                                            },
                                            {
                                                type: 'menuitem',
                                                text: 'Sub menu item 2',
                                                icon: 'lock',
                                                onAction: function () {
                                                    editor.insertContent('&nbsp;<em>You clicked Sub menu item 2!</em>');
                                                }
                                            }
                                        ];
                                    }
                                }
                            ];
                            callback(items);
                        }
                    });

                },
                content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
            }}
        />

我正在查看文档，听起来我可以在每次打开自定义下拉菜单时使用获取功能来构建项目。前端不是我的强项，所以我可能在这里遗漏了一些简单的东西，但我只是想为获取提供一个功能，以便我可以动态构建菜单。像这样的东西：

                setup: function (editor) {
                    /* Menu items are recreated when the menu is closed and opened, so we need
                       a variable to store the toggle menu item state. */
                    var toggleState = false;

                    /* example, adding a toolbar menu button */
                    editor.ui.registry.addMenuButton('insertvarbutton', {
                        text: 'Insert Variable',
                        fetch: this.buildCustomEditorButtons(editor)
                    });

                },

注意

fetch: this.myFunctionThatReturnsItems(editor)

部分。

然后我构建菜单项的函数看起来像这样：

    buildCustomEditorButtons(editor) {
    let test = []
    for (const [key, value] of Object.entries(this.state.templateVars.system_vars)) {
        test << {
            type: "nestedmenuitem",
            text: key,
            getSubmenuItems: function () {
                value.map((i) => {
                    return {
                        type: 'menuitem',
                        text: i.name,
                        onAction: function () {
                            editor.insertContent(i.value);
                        }
                    }
                })
            }
        }
    }
    return(test)
}

我在那里尝试了许多不同的语法。我已经看到了几个与我正在尝试做的事情很接近的例子，但它们都在设置函数中使用了 const，而不是外部函数。任何帮助都会很棒，谢谢！