You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

113 lines
3.1 KiB

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