答案是编辑按钮没有该死的挂钩。
这只是一堆JSwp-includes/js/tinymce/plugins/wpeditimage/plugin.js
.
我已经在下面列出了您需要的基本信息。要点:
a、 单击具有data-wp-imgselect
属性将打开图像编辑对话框。如果你不想发生这种事,你需要把它改成别的东西(data-wp-chartselect
在我的示例中)。
b、 一个很好的预防方法wpeditimage
“从冲突”是指给定您正在编辑的任何元素mceItem
班这会使WordPress认为它是一个占位符,因此不会选择它。
c、 你看不到的是我的Angular应用程序从datacharts.cb_url
全球的我有一个按钮,点击时会执行以下操作:
parent.tinymce.activeEditor.insertContent(\'<div class="mceNonEditable"><img src="\' + angular.element(\'.savePNG\').attr(\'href\') + \'" data-llama=\\\'\' + window.btoa(angular.toJson(scope.config)) + \'\\\' class="mceItem" /></div><br />\');
parent.tinymce.activeEditor.windowManager.close();
这里的关键是它创建了一个具有数据属性的图像(
data-llama
) 包含图表配置的Base64编码表示。当它通过TinyMCE传回我的Angular应用程序时,它会被解码和反序列化,然后用于填充图表。我正在公开我的整个代码库,一旦我这样做了,我会在这里链接到它,以防你想看到一个完整的实现。
不用多说,下面是我的TinyMCE插件:
/**
* datacharts TinyMCE plugin
*/
tinymce.PluginManager.add(\'datacharts\', function(editor, url) {
var toolbarActive = false;
// Add a button that opens a window. This is just the toolbar.
editor.addButton(\'datacharts\', {
text: false,
icon: \'icon dashicons-chart-area\',
onclick: function() {
// Open window
editor.windowManager.open({
title: \'datacharts\',
width: jQuery(window).width() - 100,
height: jQuery(window).height() - 100,
url: datacharts.cb_url,
buttons: [
{
text: \'Cancel\',
onclick: \'close\'
}
]
});
}
});
function editImage( img ) {
// Open window
editor.windowManager.open({
title: \'datacharts\',
width: jQuery(window).width() - 100,
height: jQuery(window).height() - 100,
url: datacharts.cb_url,
buttons:
[
{
text: \'Cancel\',
onclick: \'close\'
}
]
},
{ // This object is passed to the receiving URL via parent.tinymce.activeEditor.windowManager.getParams()
llama: img.dataset.llama
}
);
}
// Remove the element if the "delete" button is clicked.
function removeImage( node ) {
var wrap;
if ( node.nodeName === \'DIV\' && editor.dom.hasClass( node, \'mceTemp\' ) ) {
wrap = node;
} else if ( node.nodeName === \'IMG\' || node.nodeName === \'DT\' || node.nodeName === \'A\' ) {
wrap = editor.dom.getParent( node, \'div.mceTemp\' );
}
if ( wrap ) {
if ( wrap.nextSibling ) {
editor.selection.select( wrap.nextSibling );
} else if ( wrap.previousSibling ) {
editor.selection.select( wrap.previousSibling );
} else {
editor.selection.select( wrap.parentNode );
}
editor.selection.collapse( true );
editor.nodeChanged();
editor.dom.remove( wrap );
} else {
editor.dom.remove( node );
}
removeToolbar();
}
// This adds the "edit" and "delete" buttons.
function addToolbar( node ) {
var rectangle, toolbarHtml, toolbar, left,
dom = editor.dom;
removeToolbar();
// Don\'t add to placeholders
if ( ! node || node.nodeName !== \'IMG\' || isPlaceholder( node ) ) {
return;
}
dom.setAttrib( node, \'data-wp-chartselect\', 1 );
rectangle = dom.getRect( node );
toolbarHtml = \'<div class="dashicons dashicons-edit edit" data-mce-bogus="1"></div>\' +
\'<div class="dashicons dashicons-no-alt remove" data-mce-bogus="1"></div>\';
toolbar = dom.create( \'div\', {
\'id\': \'wp-image-toolbar\',
\'data-mce-bogus\': \'1\',
\'contenteditable\': false
}, toolbarHtml );
if ( editor.rtl ) {
left = rectangle.x + rectangle.w - 82;
} else {
left = rectangle.x;
}
editor.getBody().appendChild( toolbar );
dom.setStyles( toolbar, {
top: rectangle.y,
left: left
});
toolbarActive = true;
}
// This removes the edit and delete buttons.
function removeToolbar() {
var toolbar = editor.dom.get( \'wp-image-toolbar\' );
if ( toolbar ) {
editor.dom.remove( toolbar );
}
editor.dom.setAttrib( editor.dom.select( \'img[data-wp-chartselect]\' ), \'data-wp-chartselect\', null );
toolbarActive = false;
}
function isPlaceholder( node ) {
var dom = editor.dom;
if ( /*dom.hasClass( node, \'mceItem\' ) ||*/ dom.getAttrib( node, \'data-mce-placeholder\' ) ||
dom.getAttrib( node, \'data-mce-object\' ) ) {
return true;
}
return false;
}
editor.on( \'mousedown\', function( event ) {
if ( editor.dom.getParent( event.target, \'#wp-image-toolbar\' ) ) {
if ( tinymce.Env.ie ) {
// Stop IE > 8 from making the wrapper resizable on mousedown
event.preventDefault();
}
} else if ( event.target.nodeName !== \'IMG\' ) {
removeToolbar();
}
});
editor.on( \'mouseup\', function( event ) {
var image,
node = event.target,
dom = editor.dom;
// Don\'t trigger on right-click
if ( event.button && event.button > 1 ) {
return;
}
if ( node.nodeName === \'DIV\' && dom.getParent( node, \'#wp-image-toolbar\' ) ) {
image = dom.select( \'img[data-wp-chartselect]\' )[0];
if ( image ) {
editor.selection.select( image );
if ( dom.hasClass( node, \'remove\' ) ) {
removeImage( image );
} else if ( dom.hasClass( node, \'edit\' ) ) {
editImage( image );
}
}
} else if ( node.nodeName === \'IMG\' && ! editor.dom.getAttrib( node, \'data-wp-chartselect\' ) && ! isPlaceholder( node ) ) {
addToolbar( node );
} else if ( node.nodeName !== \'IMG\' ) {
removeToolbar();
}
});
editor.on( \'cut\', function() {
removeToolbar();
});
// This might not be needed, not sure what it does.
editor.on( \'PostProcess\', function( event ) {
if ( event.get ) {
event.content = event.content.replace( / data-wp-chartselect="1"/g, \'\' );
}
});
});