From fcea3233964ad9a41ab7022b94026058ef380d1d Mon Sep 17 00:00:00 2001 From: Andrew Ozz Date: Thu, 13 Feb 2014 05:09:04 +0000 Subject: [PATCH] TinyMCE: add image based placeholders for audio and video shortcodes. Props wonderboymusic, see #27016. git-svn-id: https://develop.svn.wordpress.org/trunk@27169 602fd350-edb4-49c9-b593-d223f7449a82 --- .../js/tinymce/plugins/wpgallery/plugin.js | 115 +++++++++++------- .../tinymce/skins/wordpress/images/audio.png | Bin 0 -> 944 bytes .../tinymce/skins/wordpress/images/video.png | Bin 0 -> 887 bytes .../js/tinymce/skins/wordpress/wp-content.css | 42 +++++-- 4 files changed, 99 insertions(+), 58 deletions(-) create mode 100644 src/wp-includes/js/tinymce/skins/wordpress/images/audio.png create mode 100644 src/wp-includes/js/tinymce/skins/wordpress/images/video.png diff --git a/src/wp-includes/js/tinymce/plugins/wpgallery/plugin.js b/src/wp-includes/js/tinymce/plugins/wpgallery/plugin.js index df2e8fca74..2decd5b0ad 100644 --- a/src/wp-includes/js/tinymce/plugins/wpgallery/plugin.js +++ b/src/wp-includes/js/tinymce/plugins/wpgallery/plugin.js @@ -1,53 +1,73 @@ /* global tinymce */ tinymce.PluginManager.add('wpgallery', function( editor ) { - function parseGallery( content ) { - return content.replace( /\[gallery([^\]]*)\]/g, function( match, attr ) { - var data = tinymce.DOM.encode( attr ); + function replaceGalleryShortcodes( content ) { + return content.replace( /\[gallery([^\]]*)\]/g, function( match ) { + var data = window.encodeURIComponent( match ); - return ''; + return ''; }); } - function getGallery( content ) { + function replaceAVShortcodes( content ) { + return content.replace( /\[(audio|video)[^\]]*\][\s\S]*?\[\/\1\]/g, function( match, type ) { + var data = window.encodeURIComponent( match ), + cls = 'wp-media mceItem wp-' + type; + + return ''; + }); + } + + function restoreMediaShortcodes( content ) { function getAttr( str, name ) { - name = new RegExp( name + '=\"([^\"]+)\"', 'g' ).exec( str ); - return name ? tinymce.DOM.decode( name[1] ) : ''; + name = new RegExp( name + '=\"([^\"]+)\"' ).exec( str ); + return name ? window.decodeURIComponent( name[1] ) : ''; } - return content.replace( /(?:]*>)*(]+>)(?:<\/p>)*/g, function( match, image ) { - var cls = getAttr( image, 'class' ); + return content.replace( /(?:]+)?>)*(]+>)(?:<\/p>)*/g, function( match, image ) { + var data = getAttr( image, 'data-wp-media' ); - if ( cls.indexOf('wp-gallery') !== -1 ) { - return '

['+ tinymce.trim( getAttr( image, 'title' ) ) +']

'; + if ( data ) { + return '

' + data + '

'; } return match; }); } - // Register the command so that it can be invoked by using tinyMCE.activeEditor.execCommand('...'); - editor.addCommand( 'WP_Gallery', function() { - var gallery, frame, node; + function editMedia( node ) { + var gallery, frame, data; + + if ( node.nodeName !== 'IMG' ) { + return; + } // Check if the `wp.media.gallery` API exists. if ( typeof wp === 'undefined' || ! wp.media || ! wp.media.gallery ) { return; } - node = editor.selection.getNode(); - gallery = wp.media.gallery; - // Make sure we've selected a gallery node. - if ( node.nodeName === 'IMG' && editor.dom.hasClass( node, 'wp-gallery' ) ) { - frame = gallery.edit( '[' + editor.dom.getAttrib( node, 'title' ) + ']' ); + if ( editor.dom.hasClass( node, 'wp-gallery' ) ) { + gallery = wp.media.gallery; + data = window.decodeURIComponent( editor.dom.getAttrib( node, 'data-wp-media' ) ); + frame = gallery.edit( data ); frame.state('gallery-edit').on( 'update', function( selection ) { - var shortcode = gallery.shortcode( selection ).string().slice( 1, -1 ); - editor.dom.setAttrib( node, 'title', shortcode ); + var shortcode = gallery.shortcode( selection ).string(); + editor.dom.setAttrib( node, 'data-wp-media', window.encodeURIComponent( shortcode ) ); }); + } else { + // temp + window.console && console.log( 'Edit AV shortcode ' + window.decodeURIComponent( editor.dom.getAttrib( node, 'data-wp-media' ) ) ); } + } + + // 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( 'init', function( e ) { @@ -68,44 +88,49 @@ tinymce.PluginManager.add('wpgallery', function( editor ) { } }); */ - editor.on( 'mouseup', function( e ) { - if ( e.target.nodeName === 'IMG' && editor.dom.hasClass( e.target, 'wp-gallery' ) ) { + editor.on( 'mouseup', function( event ) { + var dom = editor.dom, + node = event.target; + + if ( node.nodeName === 'IMG' && dom.getAttrib( node, 'data-wp-media' ) ) { // Don't trigger on right-click - if ( e.button !== 2 ) { - if ( editor.dom.hasClass( e.target, 'wp-gallery-selected' ) ) { - editor.execCommand('WP_Gallery'); - editor.dom.removeClass( e.target, 'wp-gallery-selected' ); + if ( event.button !== 2 ) { + if ( dom.hasClass( node, 'wp-media-selected' ) ) { + editMedia( node ); + dom.removeClass( node, 'wp-media-selected' ); } else { - editor.dom.addClass( e.target, 'wp-gallery-selected' ); + dom.addClass( node, 'wp-media-selected' ); } } } else { - editor.dom.removeClass( editor.dom.select( 'img.wp-gallery-selected' ), 'wp-gallery-selected' ); + dom.removeClass( dom.select( 'img.wp-media-selected' ), 'wp-media-selected' ); } }); - // Display 'gallery' instead of img in element path - editor.on( 'ResolveName', function( e ) { + // Display gallery, audio or video instead of img in the element path + editor.on( 'ResolveName', function( event ) { var dom = editor.dom, - target = e.target; + node = event.target; - if ( target.nodeName === 'IMG' && dom.hasClass( target, 'wp-gallery' ) ) { - e.name = 'gallery'; + if ( node.nodeName === 'IMG' && dom.getAttrib( node, 'data-wp-media' ) ) { + if ( dom.hasClass( node, 'wp-gallery' ) ) { + event.name = 'gallery'; + } else if ( dom.hasClass( node, 'wp-video' ) ) { + event.name = 'video'; + } else if ( dom.hasClass( node, 'wp-audio' ) ) { + event.name = 'audio'; + } } }); - editor.on( 'BeforeSetContent', function( e ) { - e.content = parseGallery( e.content ); + editor.on( 'BeforeSetContent', function( event ) { + event.content = replaceGalleryShortcodes( event.content ); + event.content = replaceAVShortcodes( event.content ); }); - editor.on( 'PostProcess', function( e ) { - if ( e.get ) { - e.content = getGallery( e.content ); + editor.on( 'PostProcess', function( event ) { + if ( event.get ) { + event.content = restoreMediaShortcodes( event.content ); } }); - - return { - _do_gallery: parseGallery, - _get_gallery: getGallery - }; }); diff --git a/src/wp-includes/js/tinymce/skins/wordpress/images/audio.png b/src/wp-includes/js/tinymce/skins/wordpress/images/audio.png new file mode 100644 index 0000000000000000000000000000000000000000..e2fc8a58714333882717b922b3bf6dc75d189c2a GIT binary patch literal 944 zcmV;h15f;kP)Px#24YJ`L;(K){{a7>y{D4^000SaNLh0L01FcU01FcV0GgZ_00007bV*G`2i^h= z1RXKO@tC*(00S^dL_t(&-tC${Nb^7##-Fqu+R};zb*eG`p;18uor*dL4k|c0ix4PS z2SK5mxVlIwxG8jSaCFj1I;glwvp94}E=?Ed5EVoaFb8M!!7JrFXe|f6wLK zJ6;0#^5u${-w>ptD3lNaP17(jF@fRXVaD?yq9{^DQ9uX*Aq0w|;OXh9(H@J%aCUa) z9S}lDQ^3_~6}4Io@9*y|pUq@4SY2IhiapdRmp?j82!S97mdBGM>C1m1r(OQ&Fd+oB zS`FLV+pe2s8>Cn)Qc)CbyZmDys;bh>%}tz~oOmKh1gt)Id3lMKmlw}uJIf#s4-cM7 z+X4I$g}fM4JRV0Xl>*Q6h(sbdK0fw7NFWdZ%d+5k{^PH4*xlXTQBST&EEWUL^9{#m zXJ;ADzgn%__Us;U%k7SX?C$PjYHI37E~0-X{rVt2h!5g}_#prH?N?P*DoGM#S;phz zBYJvzFg7;!dq6ZzqxpOu>+9>f?Ok16&Vp1b6&ef%b*p?D2nc$Bl&#(+l}Xx2qEr)sH#eD zZf;zMs8lNS_4U=(7!1Q0gXmSb-B53DukA7V`udDPWLfSANFtG7?7|EV4jO}WvW}}4 zh#3tH4H<(B3=G%~FdB`v)o*EO$?_aCGc)M#?`I4_^eD|JnM`7IbhNGO%iP=?v$(iu zdXDbyZftFBeV?_)$H#5GyXkb=RR5iw9VVGfw%tD%3?iG&B9TZiEzgl`HfsqY9*<*T zVZros#bU9om0?*H`}_NtpPx5e@h=Sr2M6^0{M?jNdwY9Gr_+{i#aCBX^y171VLyywr+=ZVZz}sGMNlkR#qIl+H0Cd>-9QPsg$WP4Le_7U(>_G z!-hjT8y0J8Yv4G}6CWM44C4O&o=TDgLI|SKC|H&S$8i`L8Tl2TfB5ocQ~v;N@kW}V S*IQ8l0000IP)Px#24YJ`L;(K){{a7>y{D4^000SaNLh0L01FcU01FcV0GgZ_00007bV*G`2i^h= z1R*)N*=cnE00Q?(L_t(&-tCw@Nb67(fWHQVSkx|tg2X|r4o>1C*ikwwIOw1_6;z~k zP~04JD%hoi7CLowsJIDAMvE>|cLz0sluQP#6o2xjC-2s$wbmr9u}h*pLMWgF(i|#^~wk@qGxQ>$){RKTo+_Zs@?9hE0+7vSF$_a!simbQWLf6$@R0NK^O|a^8AMSO z=H})A$Ye5@rYW>kEEYqOB=-0BxwyCxzKuqs1OfpHg#t%MNAFr{U|;~lFvw=JHUC_x z*<0#cAdT2kHG?#2Oa1piOe7LkH`@W8DV&M*ykq5+1Z&@4dmCf){ld%uC7`K2M1QugP5jCGMQw3ecjS^-D+Bpzmd=9 ziO1tOWyjVv;-no%7P}L69NV?*w&VErYnL5Y&JjE8xOyP|q#f5!cGEOTrBa-noYV!= z;x} zMx3%>tC9Zxe&X>sP660vWMyT==QPBxx_qeGTDe?~L?U6iS!A`Vpf7=(o}M;^5$|5h z1F`#f(a}L)U!M;zyzt^n@dupjkxVo~eN+Gd N002ovPDHLkV1ju}qGSL7 literal 0 HcmV?d00001 diff --git a/src/wp-includes/js/tinymce/skins/wordpress/wp-content.css b/src/wp-includes/js/tinymce/skins/wordpress/wp-content.css index f9537a2932..f0b9a73f84 100644 --- a/src/wp-includes/js/tinymce/skins/wordpress/wp-content.css +++ b/src/wp-includes/js/tinymce/skins/wordpress/wp-content.css @@ -108,15 +108,41 @@ img::selection { border-top: 3px dotted #bbb; } -.mce-content-body img.wp-gallery { - border: 1px dashed #888; - background: #f2f2f2 url("images/gallery.png") no-repeat scroll center center; +/* Gallery, audio, vudeo placeholders */ +.mce-content-body img.wp-media { + border: 1px solid #aaa; + background-color: #f2f2f2; + background-repeat: no-repeat; + background-position: center center; width: 99%; height: 250px; outline: 0; cursor: pointer; } +.mce-content-body img.wp-media:hover { + background-color: #ededed; + border-color: #777; +} + +.mce-content-body img.wp-media.wp-media-selected { + background-color: #d8d8d8; + border-color: #777; +} + +.mce-content-body img.wp-media.wp-gallery { + background-image: url("images/gallery.png"); +} + +.mce-content-body img.wp-media.wp-video { + background-image: url("images/video.png"); +} + +.mce-content-body img.wp-media.wp-audio { + height: 70px; + background-image: url("images/audio.png"); +} + #wp-image-toolbar { position: absolute; } @@ -157,16 +183,6 @@ img::selection { outline: 1px solid #777; } -.mce-content-body img.wp-gallery:hover { - background-color: #ededed; - border-style: solid; -} - -.mce-content-body img.wp-gallery.wp-gallery-selected { - background-color: #d8d8d8; - border-style: solid; -} - img.wp-oembed { border: 1px dashed #888; background: #f7f5f2 url("images/embedded.png") no-repeat scroll center center;