如何通过AJAX调用为TinyMCE 6生成link_list数组？

我正在更新旧代码，尝试在TinyMCE 6版本中通过AJAX调用创建link_list，不确定当前的实现方式是否正确。后端用Flask实现，会从数据库获取包含title和value键值对的字典元组。我认为AJAX调用需要返回如下格式的数组：

my_ary=[
    { title: 'title 1',value: 'link1'},
    { title: 'title 2',value: 'link2'},
    { title: 'title 3',value: 'link3'},
]

请问这种方式可行吗？还是我的方向完全错了？以下是我当前的代码：

TinyMCE初始化代码 #

tinymce.init({
    selector: '.my_editor',
    plugins: ['link'],
    toolbar: 'link',
    link_list: (success) => {
        const links = update_item_list();
        success(links);
    },
});

包含AJAX调用的JavaScript代码 #

function update_item_list()
{
    my_link_list = $.ajax({
        async: false,
        type: "POST",
        url: "ajax_endpoint",
        data: {},
        cache: false,
        dataType: "json",
        success: function(list)
        {
        const my_ary=Array.from(Array(list.length), () => ({ title: '', value: '' }))
        for(var i = 0; i < list.length; i++)
            {
            my_ary[i].title=list[i].title;
            my_ary[i].value=list[i].value;
            }
        },
        error: function(html, status)
        {
            alert("error: " + status);
        }
    });
    return my_link_list;
}

Flask端点代码 #

@my_project.route('/ajax_endpoint',methods=['POST'])
def ajax_endpoint():
    uploaded_items = ["{" + ", ".join([f"'{key}': '{item.get(key)}'" for key in item.keys()]) + "}" for item in get_link_items()]
    html = "[" + ", ".join(uploaded_items) + "]"

    return jsonify(html)

问题分析与修正方案 #

你的方向是对的，但当前代码存在几个关键问题：

1. AJAX同步调用的错误
   使用async: false会阻塞浏览器主线程，且$.ajax()返回的是jqXHR对象，并非请求返回的链接数组，导致TinyMCE拿到错误数据。

2. Flask后端JSON格式错误
   手动拼接JSON字符串后用jsonify返回，会导致前端拿到转义后的字符串而非JSON数组。正确做法是直接返回Python列表，jsonify会自动处理为正确的JSON响应。

3. 前端回调处理冗余
   若后端返回的已是符合要求的数组，前端无需重新创建数组循环赋值，直接使用返回的list即可。

修正后的代码 #

前端TinyMCE初始化（异步处理）

tinymce.init({
    selector: '.my_editor',
    plugins: ['link'],
    toolbar: 'link',
    link_list: (success) => {
        $.ajax({
            type: "POST",
            url: "ajax_endpoint",
            data: {},
            cache: false,
            dataType: "json",
            success: function(list) {
                // 直接将后端返回的数组传给success
                success(list);
            },
            error: function(xhr, status) {
                alert("加载链接列表失败: " + status);
                // 失败时传入空数组避免报错
                success([]);
            }
        });
    },
});

Flask后端代码修正

@my_project.route('/ajax_endpoint',methods=['POST'])
def ajax_endpoint():
    # 假设get_link_items()返回的是包含{'title':..., 'value':...}的字典列表
    uploaded_items = get_link_items()
    # 直接返回列表，jsonify自动转为正确JSON
    return jsonify(uploaded_items)

说明 #

• TinyMCE 6的link_list支持异步加载，只需在回调中调用success()传入符合格式的数组即可，无需同步返回。
• Flask的jsonify可直接接收Python列表/字典，自动序列化为正确的JSON响应，避免手动拼接带来的格式错误。
• 移除async: false，改用异步AJAX，避免阻塞页面交互。

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