wp.media.view.ImageDetails - Lưu cài đặt dưới dạng các thuộc tính dữ liệu HTML5- * cho hình ảnh

Điều cuối cùng tôi muốn đạt được là các cài đặt bổ sung được thêm vào hộp Chi tiết hình ảnh, sẽ được lưu trong <img>thẻ hình ảnh dưới dạng data-*các thuộc tính

Thí dụ: <img src="..." data-my_setting="...">

MA CUA TOI

Tôi đang tạo một plugin và tôi cần tạo thêm cài đặt khi bạn chỉnh sửa hình ảnh. Cho đến nay tôi có mã sau đây:

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($))

Tôi đã tạo một bài đăng mới và thêm một hình ảnh, sau đó nhấp vào nó và nhấn Edit (biểu tượng bút chì trên thanh công cụ bật lên). Tôi đã kết thúc trên trang chi tiết hình ảnh, và đây là những gì nó trông giống như:

Càng xa càng tốt. Trên dòng này:

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

Tôi thường sử dụng jQuery để lấy giá trị của đầu vào, nhưng với mục đích thử nghiệm, tôi đã thay đổi nó thành giá trị tĩnh 'setting-value-here'. Tôi nhấn 'Cập nhật' ở góc dưới bên phải của hộp Chi tiết hình ảnh.

VẤN ĐỀ

Trong trình soạn thảo Văn bản, nó hiển thị mã HTML như sau:

Cái này không có data-settings="setting-value-here", làm sao vậy?

Nếu tôi thay thế dòng này:

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

Nó không thay đổi thẻ ALT thành alt="setting-value-here". Vậy tôi đang làm gì sai khi cố gắng đặt thuộc tính data- *?

GIẢI PHÁP

Cảm ơn @bonger (người đã nhận được toàn bộ tiền thưởng của 50 Danh tiếng), tôi có mã sau:

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: (Cần phải sử dụng 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 );
});

Một cách để làm điều đó là sử dụng (rất thuận tiện) editor:image-editvà editor:image-updatecác sự kiện được kích hoạt bởi wpeditimageplugin tinymce để lấy / đặt dom trực tiếp ( được cập nhật để bọc trong wp_enqueue_mediahành động):

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

Để thêm và điền vào trường cài đặt, có lẽ sẽ khó hơn khi hack đầu ra wp_print_media_templates()thay vì ghi đè ImageDetails.initialize()( được cập nhật để wp_enqueue_mediathực hiện):

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