web-dev-qa-db-fra.com

Crochet pour modification d'image

Existe-t-il un crochet pour la fenêtre contextuelle qui apparaît lorsque vous cliquez sur le bouton Modifier sur une image dans un message?

4
Stephan S.

La réponse est il n'y a aucun crochet pour le bouton d'édition .

C'est juste un groupe de JS contenu dans wp-includes/js/tinymce/plugins/wpeditimage/plugin.js.

J'ai inclus les éléments essentiels de ce dont vous avez besoin ci-dessous. Points clés:

une. Cliquer sur un élément avec un attribut data-wp-imgselect ouvrira la boîte de dialogue d'édition d'image. Vous devez changer cela en autre chose si vous ne voulez pas que cela se produise (data-wp-chartselect dans mon exemple).

b. Un bon moyen d'éviter que wpeditimage ne soit en conflit est de donner à l'élément que vous modifiez une classe mceItem. Cela fera penser à WordPress que c'est un espace réservé et donc ne pas le sélectionner.

c. Le bit que vous ne pouvez pas voir est mon application Angular chargée à partir du datacharts.cb_url global. J'ai un bouton dans celui qui fait ce qui suit quand on clique dessus:

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

L'important est de créer une image avec un attribut de données (data-llama) contenant une représentation codée en Base64 de la configuration de ma carte. Celui-ci est décodé et désérialisé lorsqu'il est renvoyé à mon application Angular via TinyMCE, qui est ensuite utilisé pour renseigner le graphique. J'utilise en sous-traitance l'intégralité de ma base de code et j'y ferai un lien ici, au cas où vous souhaiteriez une implémentation complète.

Sans plus tarder, voici mon 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 = '<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, '' );
    }
  });

});
2
aendrew