|
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" />'; |
|
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 }); |