5
|
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 |
}); |