如何在TinyMCE 5的file_picker_callback中为锚链接设置class与rel属性

核心问题是你调用callback时传入的自定义属性名不符合TinyMCE 5的参数规范，因此无法被识别生效。file_picker_callback的第二个元数据参数中，固定使用class字段对应锚链接的class属性，rel字段对应锚链接的rel属性。

修改要点 #

• 把回调参数里的无效键名css_classes_attribute改为class，值填你要设置的CSS类名，多个类名用空格分隔即可
• 新增rel字段，值填你需要设置的rel属性内容，可根据业务需求自定义

修改后的代码示例 #

tinyMCE.init({
    //...
    file_picker_types: 'file image',
    file_picker_callback: function(callback, value, meta) {
        if (meta.filetype == 'file') {
            tinymce.activeEditor.windowManager.openUrl({
                title: 'File browser',
                url: TINYMCE_FILE_BROWSER_URL,
                onMessage: function (api, data) {
                    if (data.mceAction === 'fileAction') { 
                        // 修正参数键名，新增rel属性
                        callback(data.url, { 
                            text: data.text, 
                            'class': 'int_mark_link',
                            'rel': 'nofollow noopener' // 此处可根据实际需求修改rel值
                        });
                        api.close();
                    }
                }
            });
        }
    },
    //predefined CSS classes:
    link_class_list: [
        {title: 'None', value: ''},
        {title: 'External Link', value: 'ext_link'},
        {title: 'Internal Support Link', value: 'int_sup_link'},
        {title: 'Internal Marketing Link', value: 'int_mark_link'},
        {title: 'Other Internal Link', value: 'int_other_link'}
    ],
    //...
});

你预定义在link_class_list里的类可以直接赋值给class字段，TinyMCE会自动完成匹配校验，不需要额外处理。

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