Hook for image edit popup

时间:2012-12-03 作者:Stephan S.

是否有一个弹出窗口的挂钩,当您在帖子中单击图像上的编辑按钮时会显示该弹出窗口?

2 个回复
SO网友:aendra

答案是编辑按钮没有该死的挂钩。

这只是一堆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, \'\' );
    }
  });

});

SO网友:ggutenberg
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;
}
结束