如何在TinyMCE Cloud图片工具中添加data-imagebox属性

要实现这个需求，你需要完成两个核心操作：允许TinyMCE保留自定义的data属性，以及在插入/编辑图片时为元素添加该属性，下面分两种场景给出具体实现：

场景1：自动为所有插入的图片添加data-imagebox属性 #

这种方式无需用户额外操作，所有插入或编辑的图片都会自动带上data-imagebox属性：

tinymce.init({
   selector: 'textarea',
    plugins: 'image',
    menubar: 'insert',
    toolbar: 'image',
    image_advtab: true,
    image_class_list: [
        {title: 'None', value: ''},
        {title: 'custom-css', value: 'custom-css'},
    ],
    // 关键配置：告诉TinyMCE不要过滤img标签的data-imagebox属性
    extended_valid_elements: 'img[src|alt|class|data-imagebox]',
    setup: function(editor) {
        // 监听图片插入事件，给新插入的图片添加属性
        editor.on('InsertContent', function(e) {
            if (e.content.includes('<img')) {
                const tempDiv = document.createElement('div');
                tempDiv.innerHTML = e.content;
                const img = tempDiv.querySelector('img');
                if (img) {
                    img.setAttribute('data-imagebox', '');
                    // 替换原本插入的内容
                    editor.insertContent(tempDiv.innerHTML, {merge: true});
                }
            }
        });

        // 监听节点选中事件，确保编辑已有图片时属性不会丢失
        editor.on('NodeChange', function(e) {
            const selectedNode = e.element;
            if (selectedNode.tagName === 'IMG' && !selectedNode.hasAttribute('data-imagebox')) {
                selectedNode.setAttribute('data-imagebox', '');
            }
        });
    }
});

场景2：让用户在图片对话框中选择是否添加属性 #

如果需要让用户自主决定是否给图片加data-imagebox，可以自定义图片对话框的字段：

tinymce.init({
   selector: 'textarea',
    plugins: 'image',
    menubar: 'insert',
    toolbar: 'image',
    image_advtab: true,
    image_class_list: [
        {title: 'None', value: ''},
        {title: 'custom-css', value: 'custom-css'},
    ],
    // 必须配置，否则自定义属性会被TinyMCE过滤
    extended_valid_elements: 'img[src|alt|class|data-imagebox]',
    setup: function(editor) {
        // 替换默认的图片对话框
        editor.settings.image_dialog_callback = function(callback, value) {
            editor.windowManager.open({
                title: '插入/编辑图片',
                body: [
                    {type: 'textbox', name: 'src', label: '图片地址', value: value.src || ''},
                    {type: 'textbox', name: 'alt', label: '替代文本', value: value.alt || ''},
                    {type: 'listbox', name: 'class', label: '样式类', values: [
                        {text: '无', value: ''},
                        {text: 'custom-css', value: 'custom-css'}
                    ], value: value.class || ''},
                    // 添加自定义复选框，默认勾选
                    {type: 'checkbox', name: 'dataImagebox', label: '添加data-imagebox属性', checked: true}
                ],
                onsubmit: function(e) {
                    const imgAttrs = {
                        src: e.data.src,
                        alt: e.data.alt,
                        class: e.data.class
                    };
                    // 根据用户选择添加属性
                    if (e.data.dataImagebox) {
                        imgAttrs['data-imagebox'] = '';
                    }
                    callback(imgAttrs);
                }
            });
        };
    }
});

关键说明 #

• extended_valid_elements是必须配置项，TinyMCE默认会过滤未声明的自定义属性，所以要明确允许img标签包含data-imagebox。
• 两种方案可根据实际需求选择：自动添加适合所有图片都需要该属性的场景，自定义对话框则更灵活。

内容的提问来源于stack exchange，提问作者Gilberto Tuñón