View file File name : plugin.js Content :/* global tinymce */ tinymce.PluginManager.add('wpgallery', function( editor ) { function replaceGalleryShortcodes( content ) { return content.replace( /\[gallery([^\]]*)\]/g, function( match ) { return html( 'wp-gallery', match ); }); } function html( cls, data ) { data = window.encodeURIComponent( data ); return '<img src="' + tinymce.Env.transparentSrc + '" class="wp-media mceItem ' + cls + '" ' + 'data-wp-media="' + data + '" data-mce-resize="false" data-mce-placeholder="1" alt="" />'; } function restoreMediaShortcodes( content ) { function getAttr( str, name ) { name = new RegExp( name + '=\"([^\"]+)\"' ).exec( str ); return name ? window.decodeURIComponent( name[1] ) : ''; } return content.replace( /(?:<p(?: [^>]+)?>)*(<img [^>]+>)(?:<\/p>)*/g, function( match, image ) { var data = getAttr( image, 'data-wp-media' ); if ( data ) { return '<p>' + data + '</p>'; } return match; }); } function editMedia( node ) { var gallery, frame, data; if ( node.nodeName !== 'IMG' ) { return; } // Check if the `wp.media` API exists. if ( typeof wp === 'undefined' || ! wp.media ) { return; } data = window.decodeURIComponent( editor.dom.getAttrib( node, 'data-wp-media' ) ); // Make sure we've selected a gallery node. if ( editor.dom.hasClass( node, 'wp-gallery' ) && wp.media.gallery ) { gallery = wp.media.gallery; frame = gallery.edit( data ); frame.state('gallery-edit').on( 'update', function( selection ) { var shortcode = gallery.shortcode( selection ).string(); editor.dom.setAttrib( node, 'data-wp-media', window.encodeURIComponent( shortcode ) ); frame.detach(); }); } } // Register the command so that it can be invoked by using tinyMCE.activeEditor.execCommand('...'). editor.addCommand( 'WP_Gallery', function() { editMedia( editor.selection.getNode() ); }); editor.on( 'mouseup', function( event ) { var dom = editor.dom, node = event.target; function unselect() { dom.removeClass( dom.select( 'img.wp-media-selected' ), 'wp-media-selected' ); } if ( node.nodeName === 'IMG' && dom.getAttrib( node, 'data-wp-media' ) ) { // Don't trigger on right-click. if ( event.button !== 2 ) { if ( dom.hasClass( node, 'wp-media-selected' ) ) { editMedia( node ); } else { unselect(); dom.addClass( node, 'wp-media-selected' ); } } } else { unselect(); } }); // Display gallery, audio or video instead of img in the element path. editor.on( 'ResolveName', function( event ) { var dom = editor.dom, node = event.target; if ( node.nodeName === 'IMG' && dom.getAttrib( node, 'data-wp-media' ) ) { if ( dom.hasClass( node, 'wp-gallery' ) ) { event.name = 'gallery'; } } }); editor.on( 'BeforeSetContent', function( event ) { // 'wpview' handles the gallery shortcode when present. if ( ! editor.plugins.wpview || typeof wp === 'undefined' || ! wp.mce ) { event.content = replaceGalleryShortcodes( event.content ); } }); editor.on( 'PostProcess', function( event ) { if ( event.get ) { event.content = restoreMediaShortcodes( event.content ); } }); });