Gancho para exibição de imagem pop-up

Existe um gancho para a janela popup que aparece quando você clica no botão de edição em uma imagem em uma postagem?

Solutions Collecting From Web of "Gancho para exibição de imagem pop-up"

A resposta é que não há nenhum maldito gancho para o botão de edição .

É apenas um monte de JS contidos em wp-includes/js/tinymce/plugins/wpeditimage/plugin.js .

Eu incluí os barebones do que você precisa abaixo. Pontos chave:

uma. Clicando em um elemento com um atributo data-wp-imgselect , abrirá o diálogo de edição de imagem. Você precisa mudar isso para outra coisa se você não quiser que isso aconteça ( data-wp-chartselect no meu exemplo).

b. Uma boa maneira de impedir que wpeditimage seja conflitante é dar qualquer elemento que você esteja editando uma class mceItem . Isso fará do WordPress pensar que é um espaço reservado e, portanto, não selecioná-lo.

c. O bit que você não pode ver é meu aplicativo angular carregado do datacharts.cb_url global. Eu tenho um botão no que faz o seguinte quando clicado:

 parent.tinymce.activeEditor.insertContent('

'); parent.tinymce.activeEditor.windowManager.close();

A chave aqui é que ele cria uma imagem com um atributo de data-llama ( data-llama ) contendo uma representação codificada Base64 da minha configuração de gráfico. Isso é decodificado e deserializado quando ele é passado de volta para o meu aplicativo Angular via TinyMCE, que é usado para preencher o gráfico. Eu sou open-sourcing toda a minha base de código e link para isso aqui, uma vez que eu fiz isso, caso você queira ver uma implementação completa.

Sem mais delongas, aqui está o meu plugin 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 = '
' + '
'; 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, '' ); } }); });
 add_filter( 'attachment_fields_to_edit', 'attachment_fields_to_edit', null, 2 ); add_filter( 'attachment_fields_to_save', 'attachment_fields_to_save', null, 2 ); function attachment_fields_to_edit( $form_fields, $post ) { $form_fields['my_attachment_field'] = array( 'label' => 'My Label', 'input' => 'text', 'value' => get_post_meta( $post->ID, '_my_attachment_field', true ) ); return $form_fields; } function attachment_fields_to_save( $post, $attachment ) { if ( ! empty( $attachment['my_attachment_field'] ) ) update_post_meta( $post['ID'], '_my_attachment_field', $attachment['my_attachment_field'] ); else delete_post_meta( $post['ID'], '_my_attachment_field' ); return $post; }