tl;dr: 为什么在TinyMCE弹出窗口中使用media manager弹出窗口会导致短代码重复？这是我的准则还是生活的方式？[剧透：这是我的代码]
我编写了一个小插件来创建一个可视化编辑器按钮和弹出窗口，插入一个表示；媒体对象：图像向右，文本向左。
在可视化编辑器中，单击按钮，
在弹出窗口中填写文本，
选择图像
万岁
该短代码已正确插入编辑器中，媒体视图将很好地呈现它。（这是此问题的简化案例。完整弹出窗口有一堆选项。）
我唯一的问题是我是否要编辑对象并更改图像。
如果我编辑文本，一切都很好。如果我更改图像，那么整个过程将插入第二个短代码，而不是替换第一个短代码。
我怀疑单击弹出窗口上的“选择图像”按钮会更改主编辑器中的基本插入点或选择，但我一辈子都看不到如何修复它。
请参见此处，当我单击以编辑对象时，对象将高亮显示：
打开弹出窗口，对象看起来仍处于选中状态：
（对管理CSS进行了调整，使其更加可见）
但单击图像按钮似乎可以进行选择：
这是我的编辑器视图JavaScript，摘自几年前DT Baker在短代码弹出窗口上所做的所有工作，现在仍然是互联网上这方面的唯一信息来源。
/* global tinyMCE */
(function($){
var media = wp.media, shortcode_string = \'media_object\';
wp.mce = wp.mce || {};
wp.mce.media_object = {
shortcode_data: {},
template: media.template( \'editor-media-object\' ),
getContent: function() {
var options = this.shortcode.attrs.named;
options.innercontent = this.shortcode.content;
return this.template(options);
},
View: { // before WP 4.2:
template: media.template( \'editor-media-object\' ),
postID: $(\'#post_ID\').val(),
initialize: function( options ) {
this.shortcode = options.shortcode;
wp.mce.media_object.shortcode_data = this.shortcode;
},
getHtml: function() {
var options = this.shortcode.attrs.named;
options.innercontent = this.shortcode.content;
return this.template(options);
}
},
edit: function( data ) {
var shortcode_data = wp.shortcode.next(shortcode_string, data);
var values = shortcode_data.shortcode.attrs.named;
// var StrippedString = shortcode_data.shortcode.content.replace(/(<([^>]+)>)/ig,"");
var StrippedString = shortcode_data.shortcode.content.replace(/(<p[^>]+?>|<p>|<\\/p>|<br>|<\\/br>|<br\\/>|<br \\/>)/img, "");
values.innercontent = StrippedString;
// values.innercontent = shortcode_data.shortcode.content;
values.imagehtml = \'<img src="\' + values.image_url + \'" class="wp-image-\' + values.image_id + \'" width=120 height=120 style="max-width: 120px; max-height: 120px;" />\';
wp.mce.media_object.popupwindow(tinyMCE.activeEditor, values);
},
// this is called from our tinymce plugin, also can call from our "edit" function above
// wp.mce.boutique_banner.popupwindow(tinyMCE.activeEditor, "bird");
popupwindow: function(editor, values, onsubmit_callback){
values = values || [];
if(typeof onsubmit_callback !== \'function\'){
onsubmit_callback = function( e ) {
// Insert content when the window form is submitted (this also replaces during edit, handy!)
var args = {
tag : shortcode_string,
//type : e.data.innercontent.length ? \'closed\' : \'single\',
content : e.data.innercontent,
type : \'closed\',
//type : \'single\',
//content : \'\',
attrs : {
image_id : e.data.image_id,
image_url : e.data.image_url,
}
};
editor.insertContent( wp.shortcode.string( args ) );
};
}
editor.windowManager.open( {
title: \'Media Object\',
body: [
{
type: \'textbox\',
name: \'innercontent\',
multiline: true,
minWidth: 500,
minHeight: 100,
label: \'Main Text\',
value: values.innercontent
},
{
type: \'textbox\',
name: \'image_url\',
label: \'Image\',
id: \'my-image-box\',
value: values.image_url
},
{
type: \'textbox\',
name: \'imagehtml\',
label: \'\',
id: \'my-image-box-html\',
hidden: true,
value: values.imagehtml
},
{
type: \'textbox\',
name: \'image_id\',
label: \'\',
id: \'my-image-box-id\',
hidden: true,
value: values.image_id
},
{
type : \'container\',
minWidth: 120,
minHeight: 120,
name : \'container\',
label : \' \',
id: \'my-image-container\',
html : values.imagehtml
},
{
type: \'button\',
name: \'selectimage\',
text: \'Select Image\',
onclick: function() {
window.mb = window.mb || {};
window.mb.frame = wp.media({
frame: \'post\',
state: \'insert\',
library : {
type : \'image\'
},
multiple: false
});
window.mb.frame.on(\'insert\', function() {
var json = window.mb.frame.state().get(\'selection\').first().toJSON();
if (0 > jQuery.trim(json.url.length)) {
return;
}
console.log(json);
jQuery(\'#my-image-box-id\').val(json.id);
jQuery(\'#my-image-box\').val(json.sizes.medium.url);
//jQuery(\'#my-image-container\').prepend(\'<img src="\' + json.url + \'" />\');
jQuery(\'#my-image-container-body\').empty().prepend(\'<img src="\' + json.sizes.medium.url + \'" width=120 height=120 style="max-width: 120px; max-height: 120px;" />\');
imagehtml = \'<img src="\' + json.sizes.medium.url + \'" class="wp-image-\' + json.id + \'" />\';
jQuery(\'#my-image-box-html\').val(imagehtml);
});
window.mb.frame.open();
}
}],
onsubmit: onsubmit_callback
} );
}
};
wp.mce.views.register( shortcode_string, wp.mce.media_object );
}(jQuery));
最合适的回答,由SO网友:Sally CJ 整理而成
我怀疑单击弹出窗口上的选择图像按钮会改变主编辑器中的基本插入点或选择，但我一辈子都看不到如何修复它。
恐怕我不知道为什么这个问题只有在图像改变时才会发生，但我可以告诉你，这个问题是你的popupwindow() 始终调用的函数editor.insertContent() （其中editor 是tinyMCE.activeEditor).
设置内容/快捷码的正确方法是，或者下面是解决问题的方法：使用editor.insertContent() 添加快捷码时，而编辑快捷码时（例如更改“主文本”或图像），应使用update() 传递给edit() 作用
首先，像这样定义该函数，然后传递update 到popupwindow():
Note: 这个your code here 指您的原始代码（即无更改）。
// 1. Add the "update" parameter.
edit: function( data, update ) {
// ... your code here (define shortcode_data, etc).
// 2. Pass the "update" to popupwindow().
wp.mce.media_object.popupwindow( tinyMCE.activeEditor, values, update );
},
然后定义
popupwindow() 和
onsubmit_callback() 功能如下：
// 1. Add the "update" parameter.
popupwindow: function( editor, values, update ) {
values = values || [];
var onsubmit_callback = function( e ) {
// ... your code here (define "args", etc).
// 2. Use the "update" function, if available.
if ( update ) { // the shortcode already in the content and is being edited
update( wp.shortcode.string( args ) );
} else { // the shortcode is being added for the 1st time
editor.insertContent( wp.shortcode.string( args ) );
}
};
editor.windowManager.open( /* your code here */ );
}
所以我希望这会有所帮助，实际上，在您的代码中，您可以使用
$ 而不是
jQuery, e、 g。
$(\'#my-image-box-id\').val(json.id). =)
