What I finally want to achieve are extra settings added to the Image Details box, that will be stored in the image <img> tag as data-* attributes

Example: <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代码：

这does not 有一个data-settings="setting-value-here", 怎么会这样？

如果我将该行替换为：

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

It部门does 更改ALT 标记到alt="setting-value-here". 那么，我在设置data-*属性时做错了什么？

由于@bonger （获得50点荣誉的全额悬赏），我有以下代码：

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 );
});

add_action( \'wp_enqueue_media\', function () {
    add_action( \'admin_footer\', function () {
        ?>
        <script type="text/javascript">
        jQuery(function ($) {
            if (wp && wp.media && wp.media.events) {
                wp.media.events.on( \'editor:image-edit\', function (data) {
                    data.metadata.my_setting = data.editor.dom.getAttrib( data.image, \'data-my_setting\' );
                } );
                wp.media.events.on( \'editor:image-update\', function (data) {
                    data.editor.dom.setAttrib( data.image, \'data-my_setting\', data.metadata.my_setting );
                } );
            }
        });
        </script>
        <?php
    }, 11 );
} );

add_action( \'wp_enqueue_media\', function () {
    remove_action( \'admin_footer\', \'wp_print_media_templates\' );
    add_action( \'admin_footer\', $func = function () {
        ob_start();
        wp_print_media_templates();
        $tpl = ob_get_clean();
        // To future-proof a bit, search first for the template and then for the section.
        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;
    } );
} );