我最后要实现的是在“图像详细信息”框中添加了额外的设置,这些设置将<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($))
我创建了一个新帖子,并添加了一个图像,然后单击它并按下“编辑”(弹出的工具栏中的铅笔图标)。我最终进入了图像详细信息页面,结果如下所示:
到目前为止,一切都很好。在这行上:
this.controller.image.set({"data-settings": 'setting-value-here'})
我通常会使用jQuery来获取输入的值,但是出于测试目的,我将其更改为的静态值'setting-value-here'
。我按了“图像详细信息”框右下角的“更新”。
问题
在文本编辑器中,它显示HTML代码,如下所示:
这个没有了data-settings="setting-value-here"
,怎么来的?
如果我将其替换为:
this.controller.image.set({alt: 'setting-value-here'})
它确实改变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 );
});