我最后要实现的是在“图像详细信息”框中添加了额外的设置，这些设置将作为<img>属性存储在图像data-*标签中。例如：<img src="..." data-my_setting="...">


我的代码

我正在创建一个插件，并且在编辑图像时需要创建更多设置。到目前为止，我有以下代码：

jQuery(function($) {

    var imageDetails = wp.media.view.ImageDetails

    wp.media.view.ImageDetails = wp.media.view.ImageDetails.extend({
        // Initialize - Call function to add settings when rendered
        initialize: function() {
            this.on('post-render', this.add_settings);
        },
        // To add the Settings
        add_settings: function() {
            $('.advanced-section').prepend('\
                <h2>My Settings</h2>\
                <input type="text" class="my_setting">\
            ');

            // Set Options
            this.controller.image.set({"data-settings": 'setting-value-here'})
        }
    });

}) // End of jQuery(function($))


我创建了一个新帖子并添加了一个图像，然后单击它并按Edit（工具栏中的铅笔图标弹出）。我最终进入了图像详细信息页面，它的外观如下：



到目前为止，一切都很好。在这条线上：

this.controller.image.set({"data-settings": 'setting-value-here'})

我通常会使用jQuery来获取输入的值，但是出于测试目的，我将其更改为'setting-value-here'的静态值。我在“图像详细信息”框的右下角按了“更新”。


问题

在文本编辑器中，HTML代码显示为this：



这没有data-settings="setting-value-here"，怎么来的？

如果我用以下内容替换行：

 this.controller.image.set({alt: 'setting-value-here'})


它的确将ALT标签更改为alt="setting-value-here"。那么，尝试设置data- *属性有什么错误呢？ ），我有以下代码：

PHP：

function add_my_settings() {
    ob_start();
    wp_print_media_templates();
    $tpl = ob_get_clean();
    if ( ( $idx = strpos( $tpl, 'tmpl-image-details' ) ) !== false
            && ( $before_idx = strpos( $tpl, '<div class="advanced-section">', $idx ) ) !== false ) {
        ob_start();
        ?>
        <div class="my_setting-section">
            <h2><?php _e( 'My Settings' ); ?></h2>
            <div class="my_setting">
                <label class="setting my_setting">
                    <span><?php _e( 'My Setting' ); ?></span>
                        <input type="text" data-setting="my_setting" value="{{ data.model.my_setting }}" />
                    </label>
                </div>
            </div>
        <?php
        $my_section = ob_get_clean();
        $tpl = substr_replace( $tpl, $my_section, $before_idx, 0 );
    }
    echo $tpl;
};

// Hack the output of wp_print_media_templates()
add_action('wp_enqueue_media', $func =
    function() {
        remove_action('admin_footer', 'wp_print_media_templates');
        add_action('admin_footer',  'add_my_settings');
    }
);


JavaScript ：（需要使用wp_enqueue_script()入队）

// When Image is Edited
wp.media.events.on('editor:image-edit', function(data) {
    data.metadata.my_setting = data.editor.dom.getAttrib( data.image, 'data-my_setting' );
});

// When Image is Updated
wp.media.events.on('editor:image-update', function(data) {
    data.editor.dom.setAttrib( data.image, 'data-my_setting', data.metadata.my_setting );
});


评论

我希望我能+2-雄辩，简洁，经过充分研究，所以在主题上很痛。这样的问题很少见。
谢谢！在提出问题之前，我总是尽力研究和研究（并广泛调试）我的问题。 （当您发现一个非常简单的问题并且OP甚至没有尝试使用Google搜索时，我都会讨厌它）

#1 楼

一种方法是使用（非常方便）由tinymce editor:image-edit插件触发的editor:image-update和wpeditimage事件直接获取/设置dom（已更新为包装在wp_enqueue_media操作中）： />
要添加并填充设置字段，破解wp_print_media_templates()的输出而不是覆盖ImageDetails.initialize()（更新为包装在wp_enqueue_media操作中）也许是更时髦的：

评论

非常感谢！这非常有用（尽管花了几分钟时间才可以解决问题）。我会接受答案并在悬赏结束前将赏金奖励给您（我想出了一个更好/更简单的答案）

–Kaspar Lee
16-2-12在8:39


嗯，如果它在wp_enqueue_media（）之前运行，就会发生这种情况。也许更好的方法是使用在wp_enqueue_media（）结尾处触发的wp_enqueue_media操作，即将所有代码包装在add_action（'wp_enqueue_media'，function（）{/ * code * /}）中；

– Bonger
16-2-16在11:11
不，反之亦然！

– Bonger
16年2月16日在11:13
我将更新答案...

– Bonger
16年2月16日在11:18
它是WP对下划线的模板内容underscorejs.org/#template的替代（请参阅“ wp-includes / js / wp-util.js”中的wp.template）...。

– Bonger
16年2月16日在11:42