it-swarm.com.de

Haken für Bildbearbeitungs-Popup

Gibt es einen Haken für das Popup-Fenster, das angezeigt wird, wenn Sie auf die Schaltfläche zum Bearbeiten eines Bildes in einem Beitrag klicken?

4
Stephan S.

Die Antwort ist es gibt keinen verdammten Haken für den Bearbeitungsknopf .

Es ist nur eine Menge von JS, die in wp-includes/js/tinymce/plugins/wpeditimage/plugin.js enthalten sind.

Ich habe die Barebones von dem, was Sie brauchen, unten aufgeführt. Wichtige Punkte:

ein. Wenn Sie auf ein Element mit einem data-wp-imgselect-Attribut klicken, wird der Bildbearbeitungsdialog geöffnet. Sie müssen dies in etwas anderes ändern, wenn dies nicht geschehen soll (data-wp-chartselect in meinem Beispiel).

b. Eine gute Möglichkeit, Konflikte zwischen wpeditimage zu vermeiden, besteht darin, jedem Element, das Sie bearbeiten, eine mceItem-Klasse zuzuweisen. Dies lässt WordPress denken, es sei ein Platzhalter und wählt ihn daher nicht aus.

c. Das Bit, das Sie nicht sehen können, ist meine Angular App, die aus dem datacharts.cb_url global geladen wurde. Ich habe eine Schaltfläche, die beim Klicken Folgendes bewirkt:

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

Das Wichtigste dabei ist, dass ein Bild mit einem Datenattribut (data-llama) erstellt wird, das eine Base64-codierte Darstellung meiner Diagrammkonfiguration enthält. Dies wird dekodiert und deserialisiert, wenn es über TinyMCE an meine Angular App zurückgegeben wird, die dann zum Auffüllen des Diagramms verwendet wird. Ich verwende Open-Sourcing für meine gesamte Codebasis und werde hier darauf verlinken, sobald ich dies getan habe, falls Sie eine vollständige Implementierung sehen möchten.

Hier ist ohne weiteres mein TinyMCE-Plugin:

/**
 *  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