2 tinymce.PluginManager.add('wpgallery', function( editor ) {
4 function replaceGalleryShortcodes( content ) {
5 return content.replace( /\[gallery([^\]]*)\]/g, function( match ) {
6 return html( 'wp-gallery', match );
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" />';
16 function restoreMediaShortcodes( content ) {
17 function getAttr( str, name ) {
18 name = new RegExp( name + '=\"([^\"]+)\"' ).exec( str );
19 return name ? window.decodeURIComponent( name[1] ) : '';
22 return content.replace( /(?:<p(?: [^>]+)?>)*(<img [^>]+>)(?:<\/p>)*/g, function( match, image ) {
23 var data = getAttr( image, 'data-wp-media' );
26 return '<p>' + data + '</p>';
33 function editMedia( node ) {
34 var gallery, frame, data;
36 if ( node.nodeName !== 'IMG' ) {
40 // Check if the `wp.media` API exists.
41 if ( typeof wp === 'undefined' || ! wp.media ) {
45 data = window.decodeURIComponent( editor.dom.getAttrib( node, 'data-wp-media' ) );
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 );
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 ) );
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() );
65 editor.on( 'mouseup', function( event ) {
70 dom.removeClass( dom.select( 'img.wp-media-selected' ), 'wp-media-selected' );
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' ) ) {
80 dom.addClass( node, 'wp-media-selected' );
88 // Display gallery, audio or video instead of img in the element path
89 editor.on( 'ResolveName', function( event ) {
93 if ( node.nodeName === 'IMG' && dom.getAttrib( node, 'data-wp-media' ) ) {
94 if ( dom.hasClass( node, 'wp-gallery' ) ) {
95 event.name = 'gallery';
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 );
107 editor.on( 'PostProcess', function( event ) {
109 event.content = restoreMediaShortcodes( event.content );