WordPress.org

Make WordPress Core

Changeset 27169


Ignore:
Timestamp:
02/13/2014 05:09:04 AM (7 years ago)
Author:
azaozz
Message:

TinyMCE: add image based placeholders for audio and video shortcodes. Props wonderboymusic, see #27016.

Location:
trunk/src/wp-includes/js/tinymce
Files:
2 added
2 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-includes/js/tinymce/plugins/wpgallery/plugin.js

    r26880 r27169  
    22tinymce.PluginManager.add('wpgallery', function( editor ) {
    33
    4     function parseGallery( content ) {
    5         return content.replace( /\[gallery([^\]]*)\]/g, function( match, attr ) {
    6             var data = tinymce.DOM.encode( attr );
     4    function replaceGalleryShortcodes( content ) {
     5        return content.replace( /\[gallery([^\]]*)\]/g, function( match ) {
     6            var data = window.encodeURIComponent( match );
    77
    8             return '<img src="' + tinymce.Env.transparentSrc + '" class="wp-gallery mceItem" ' +
    9                 'title="gallery' + data + '" data-mce-resize="false" data-mce-placeholder="1" />';
     8            return '<img src="' + tinymce.Env.transparentSrc + '" class="wp-media wp-gallery mceItem" ' +
     9                'data-wp-media="' + data + '" data-mce-resize="false" data-mce-placeholder="1" />';
    1010        });
    1111    }
    1212
    13     function getGallery( content ) {
     13    function replaceAVShortcodes( content ) {
     14        return content.replace( /\[(audio|video)[^\]]*\][\s\S]*?\[\/\1\]/g, function( match, type ) {
     15            var data = window.encodeURIComponent( match ),
     16                cls = 'wp-media mceItem wp-' + type;
     17
     18            return '<img src="' + tinymce.Env.transparentSrc + '" class="' + cls + '" ' +
     19                'data-wp-media="' + data + '" data-mce-resize="false" data-mce-placeholder="1" />';
     20        });
     21    }
     22
     23    function restoreMediaShortcodes( content ) {
    1424        function getAttr( str, name ) {
    15             name = new RegExp( name + '=\"([^\"]+)\"', 'g' ).exec( str );
    16             return name ? tinymce.DOM.decode( name[1] ) : '';
     25            name = new RegExp( name + '=\"([^\"]+)\"' ).exec( str );
     26            return name ? window.decodeURIComponent( name[1] ) : '';
    1727        }
    1828
    19         return content.replace( /(?:<p[^>]*>)*(<img[^>]+>)(?:<\/p>)*/g, function( match, image ) {
    20             var cls = getAttr( image, 'class' );
     29        return content.replace( /(?:<p(?: [^>]+)?>)*(<img [^>]+>)(?:<\/p>)*/g, function( match, image ) {
     30            var data = getAttr( image, 'data-wp-media' );
    2131
    22             if ( cls.indexOf('wp-gallery') !== -1 ) {
    23                 return '<p>['+ tinymce.trim( getAttr( image, 'title' ) ) +']</p>';
     32            if ( data ) {
     33                return '<p>' + data + '</p>';
    2434            }
    2535
     
    2838    }
    2939
    30     // Register the command so that it can be invoked by using tinyMCE.activeEditor.execCommand('...');
    31     editor.addCommand( 'WP_Gallery', function() {
    32         var gallery, frame, node;
     40    function editMedia( node ) {
     41        var gallery, frame, data;
     42
     43        if ( node.nodeName !== 'IMG' ) {
     44            return;
     45        }
    3346
    3447        // Check if the `wp.media.gallery` API exists.
     
    3750        }
    3851
    39         node = editor.selection.getNode();
    40         gallery = wp.media.gallery;
    41 
    4252        // Make sure we've selected a gallery node.
    43         if ( node.nodeName === 'IMG' && editor.dom.hasClass( node, 'wp-gallery' ) ) {
    44             frame = gallery.edit( '[' + editor.dom.getAttrib( node, 'title' ) + ']' );
     53        if ( editor.dom.hasClass( node, 'wp-gallery' ) ) {
     54            gallery = wp.media.gallery;
     55            data = window.decodeURIComponent( editor.dom.getAttrib( node, 'data-wp-media' ) );
     56            frame = gallery.edit( data );
    4557
    4658            frame.state('gallery-edit').on( 'update', function( selection ) {
    47                 var shortcode = gallery.shortcode( selection ).string().slice( 1, -1 );
    48                 editor.dom.setAttrib( node, 'title', shortcode );
     59                var shortcode = gallery.shortcode( selection ).string();
     60                editor.dom.setAttrib( node, 'data-wp-media', window.encodeURIComponent( shortcode ) );
    4961            });
     62        } else {
     63            // temp
     64            window.console && console.log( 'Edit AV shortcode ' + window.decodeURIComponent( editor.dom.getAttrib( node, 'data-wp-media' ) ) );
    5065        }
     66    }
     67
     68    // Register the command so that it can be invoked by using tinyMCE.activeEditor.execCommand('...');
     69    editor.addCommand( 'WP_Gallery', function() {
     70        editMedia( editor.selection.getNode() );
    5171    });
    5272/*
     
    6989    });
    7090*/
    71     editor.on( 'mouseup', function( e ) {
    72         if ( e.target.nodeName === 'IMG' && editor.dom.hasClass( e.target, 'wp-gallery' ) ) {
     91    editor.on( 'mouseup', function( event ) {
     92        var dom = editor.dom,
     93            node = event.target;
     94
     95        if ( node.nodeName === 'IMG' && dom.getAttrib( node, 'data-wp-media' ) ) {
    7396            // Don't trigger on right-click
    74             if ( e.button !== 2 ) {
    75                 if ( editor.dom.hasClass( e.target, 'wp-gallery-selected' ) ) {
    76                     editor.execCommand('WP_Gallery');
    77                     editor.dom.removeClass( e.target, 'wp-gallery-selected' );
     97            if ( event.button !== 2 ) {
     98                if ( dom.hasClass( node, 'wp-media-selected' ) ) {
     99                    editMedia( node );
     100                    dom.removeClass( node, 'wp-media-selected' );
    78101                } else {
    79                     editor.dom.addClass( e.target, 'wp-gallery-selected' );
     102                    dom.addClass( node, 'wp-media-selected' );
    80103                }
    81104            }
    82105        } else {
    83             editor.dom.removeClass( editor.dom.select( 'img.wp-gallery-selected' ), 'wp-gallery-selected' );
     106            dom.removeClass( dom.select( 'img.wp-media-selected' ), 'wp-media-selected' );
    84107        }
    85108    });
    86109
    87     // Display 'gallery' instead of img in element path
    88     editor.on( 'ResolveName', function( e ) {
     110    // Display gallery, audio or video instead of img in the element path
     111    editor.on( 'ResolveName', function( event ) {
    89112        var dom = editor.dom,
    90             target = e.target;
     113            node = event.target;
    91114
    92         if ( target.nodeName === 'IMG' && dom.hasClass( target, 'wp-gallery' ) ) {
    93             e.name = 'gallery';
     115        if ( node.nodeName === 'IMG' && dom.getAttrib( node, 'data-wp-media' ) ) {
     116            if ( dom.hasClass( node, 'wp-gallery' ) ) {
     117                event.name = 'gallery';
     118            } else if ( dom.hasClass( node, 'wp-video' ) ) {
     119                event.name = 'video';
     120            } else if ( dom.hasClass( node, 'wp-audio' ) ) {
     121                event.name = 'audio';
     122            }
    94123        }
    95124    });
    96125
    97     editor.on( 'BeforeSetContent', function( e ) {
    98         e.content = parseGallery( e.content );
     126    editor.on( 'BeforeSetContent', function( event ) {
     127        event.content = replaceGalleryShortcodes( event.content );
     128        event.content = replaceAVShortcodes( event.content );
    99129    });
    100130
    101     editor.on( 'PostProcess', function( e ) {
    102         if ( e.get ) {
    103             e.content = getGallery( e.content );
     131    editor.on( 'PostProcess', function( event ) {
     132        if ( event.get ) {
     133            event.content = restoreMediaShortcodes( event.content );
    104134        }
    105135    });
    106 
    107     return {
    108         _do_gallery: parseGallery,
    109         _get_gallery: getGallery
    110     };
    111136});
  • trunk/src/wp-includes/js/tinymce/skins/wordpress/wp-content.css

    r27159 r27169  
    109109}
    110110
    111 .mce-content-body img.wp-gallery {
    112     border: 1px dashed #888;
    113     background: #f2f2f2 url("images/gallery.png") no-repeat scroll center center;
     111/* Gallery, audio, vudeo placeholders */
     112.mce-content-body img.wp-media {
     113    border: 1px solid #aaa;
     114    background-color: #f2f2f2;
     115    background-repeat: no-repeat;
     116    background-position: center center;
    114117    width: 99%;
    115118    height: 250px;
    116119    outline: 0;
    117120    cursor: pointer;
     121}
     122
     123.mce-content-body img.wp-media:hover {
     124    background-color: #ededed;
     125    border-color: #777;
     126}
     127
     128.mce-content-body img.wp-media.wp-media-selected {
     129    background-color: #d8d8d8;
     130    border-color: #777;
     131}
     132
     133.mce-content-body img.wp-media.wp-gallery {
     134    background-image: url("images/gallery.png");
     135}
     136
     137.mce-content-body img.wp-media.wp-video {
     138    background-image: url("images/video.png");
     139}
     140
     141.mce-content-body img.wp-media.wp-audio {
     142    height: 70px;
     143    background-image: url("images/audio.png");
    118144}
    119145
     
    158184}
    159185
    160 .mce-content-body img.wp-gallery:hover {
    161     background-color: #ededed;
    162     border-style: solid;
    163 }
    164 
    165 .mce-content-body img.wp-gallery.wp-gallery-selected {
    166     background-color: #d8d8d8;
    167     border-style: solid;
    168 }
    169 
    170186img.wp-oembed {
    171187    border: 1px dashed #888;
Note: See TracChangeset for help on using the changeset viewer.