[Summary view] [Print] [Text view]

   1  /* global tinymce */
   2  tinymce.PluginManager.add('wpgallery', function( editor ) {
   3  
   4  	function replaceGalleryShortcodes( content ) {
   5          return content.replace( /\[gallery([^\]]*)\]/g, function( match ) {
   6              return html( 'wp-gallery', match );
   7          });
   8      }
   9  
  10  	function html( cls, data ) {
  11          data = window.encodeURIComponent( data );
  12          return '<img src="' + tinymce.Env.transparentSrc + '" class="wp-media mceItem ' + cls + '" ' +
  13              'data-wp-media="' + data + '" data-mce-resize="false" data-mce-placeholder="1" alt="" />';
  14      }
  15  
  16  	function restoreMediaShortcodes( content ) {
  17  		function getAttr( str, name ) {
  18              name = new RegExp( name + '=\"([^\"]+)\"' ).exec( str );
  19              return name ? window.decodeURIComponent( name[1] ) : '';
  20          }
  21  
  22          return content.replace( /(?:<p(?: [^>]+)?>)*(<img [^>]+>)(?:<\/p>)*/g, function( match, image ) {
  23              var data = getAttr( image, 'data-wp-media' );
  24  
  25              if ( data ) {
  26                  return '<p>' + data + '</p>';
  27              }
  28  
  29              return match;
  30          });
  31      }
  32  
  33  	function editMedia( node ) {
  34          var gallery, frame, data;
  35  
  36          if ( node.nodeName !== 'IMG' ) {
  37              return;
  38          }
  39  
  40          // Check if the `wp.media` API exists.
  41          if ( typeof wp === 'undefined' || ! wp.media ) {
  42              return;
  43          }
  44  
  45          data = window.decodeURIComponent( editor.dom.getAttrib( node, 'data-wp-media' ) );
  46  
  47          // Make sure we've selected a gallery node.
  48          if ( editor.dom.hasClass( node, 'wp-gallery' ) && wp.media.gallery ) {
  49              gallery = wp.media.gallery;
  50              frame = gallery.edit( data );
  51  
  52              frame.state('gallery-edit').on( 'update', function( selection ) {
  53                  var shortcode = gallery.shortcode( selection ).string();
  54                  editor.dom.setAttrib( node, 'data-wp-media', window.encodeURIComponent( shortcode ) );
  55                  frame.detach();
  56              });
  57          }
  58      }
  59  
  60      // Register the command so that it can be invoked by using tinyMCE.activeEditor.execCommand('...').
  61      editor.addCommand( 'WP_Gallery', function() {
  62          editMedia( editor.selection.getNode() );
  63      });
  64  
  65      editor.on( 'mouseup', function( event ) {
  66          var dom = editor.dom,
  67              node = event.target;
  68  
  69  		function unselect() {
  70              dom.removeClass( dom.select( 'img.wp-media-selected' ), 'wp-media-selected' );
  71          }
  72  
  73          if ( node.nodeName === 'IMG' && dom.getAttrib( node, 'data-wp-media' ) ) {
  74              // Don't trigger on right-click.
  75              if ( event.button !== 2 ) {
  76                  if ( dom.hasClass( node, 'wp-media-selected' ) ) {
  77                      editMedia( node );
  78                  } else {
  79                      unselect();
  80                      dom.addClass( node, 'wp-media-selected' );
  81                  }
  82              }
  83          } else {
  84              unselect();
  85          }
  86      });
  87  
  88      // Display gallery, audio or video instead of img in the element path.
  89      editor.on( 'ResolveName', function( event ) {
  90          var dom = editor.dom,
  91              node = event.target;
  92  
  93          if ( node.nodeName === 'IMG' && dom.getAttrib( node, 'data-wp-media' ) ) {
  94              if ( dom.hasClass( node, 'wp-gallery' ) ) {
  95                  event.name = 'gallery';
  96              }
  97          }
  98      });
  99  
 100      editor.on( 'BeforeSetContent', function( event ) {
 101          // 'wpview' handles the gallery shortcode when present.
 102          if ( ! editor.plugins.wpview || typeof wp === 'undefined' || ! wp.mce ) {
 103              event.content = replaceGalleryShortcodes( event.content );
 104          }
 105      });
 106  
 107      editor.on( 'PostProcess', function( event ) {
 108          if ( event.get ) {
 109              event.content = restoreMediaShortcodes( event.content );
 110          }
 111      });
 112  });