WordPress.org

Make WordPress Core

Changeset 29380


Ignore:
Timestamp:
08/06/2014 12:57:12 AM (6 years ago)
Author:
azaozz
Message:

TinyMCE: add support for class attribute on the caption shortcode. Part props knutsp, kadamwhite, fixes #28951.

File:
1 edited

Legend:

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

    r29370 r29380  
    55    function parseShortcode( content ) {
    66        return content.replace( /(?:<p>)?\[(?:wp_)?caption([^\]]+)\]([\s\S]+?)\[\/(?:wp_)?caption\](?:<\/p>)?/g, function( a, b, c ) {
    7             var id, cls, w, cap, img, width,
     7            var id, align, classes, caption, img, width,
    88                trim = tinymce.trim;
    99
     
    1313            }
    1414
    15             cls = b.match( /align=['"]([^'"]*)['"] ?/ );
    16             if ( cls ) {
    17                 b = b.replace( cls[0], '' );
    18             }
    19 
    20             w = b.match( /width=['"]([0-9]*)['"] ?/ );
    21             if ( w ) {
    22                 b = b.replace( w[0], '' );
     15            align = b.match( /align=['"]([^'"]*)['"] ?/ );
     16            if ( align ) {
     17                b = b.replace( align[0], '' );
     18            }
     19
     20            classes = b.match( /class=['"]([^'"]*)['"] ?/ );
     21            if ( classes ) {
     22                b = b.replace( classes[0], '' );
     23            }
     24
     25            width = b.match( /width=['"]([0-9]*)['"] ?/ );
     26            if ( width ) {
     27                b = b.replace( width[0], '' );
    2328            }
    2429
     
    2732
    2833            if ( img && img[2] ) {
    29                 cap = trim( img[2] );
     34                caption = trim( img[2] );
    3035                img = trim( img[1] );
    3136            } else {
    3237                // old captions shortcode style
    33                 cap = trim( b ).replace( /caption=['"]/, '' ).replace( /['"]$/, '' );
     38                caption = trim( b ).replace( /caption=['"]/, '' ).replace( /['"]$/, '' );
    3439                img = c;
    3540            }
    3641
    37             id = ( id && id[1] ) ? id[1] : '';
    38             cls = ( cls && cls[1] ) ? cls[1] : 'alignnone';
    39 
    40             if ( ! w && img ) {
    41                 w = img.match( /width=['"]([0-9]*)['"]/ );
    42             }
    43 
    44             if ( w && w[1] ) {
    45                 w = w[1];
    46             }
    47 
    48             if ( ! w || ! cap ) {
     42            id = ( id && id[1] ) ? id[1].replace( /[<>&]+/g,  '' ) : '';
     43            align = ( align && align[1] ) ? align[1] : 'alignnone';
     44            classes = ( classes && classes[1] ) ? ' ' + classes[1].replace( /[<>&]+/g,  '' ) : '';
     45
     46            if ( ! width && img ) {
     47                width = img.match( /width=['"]([0-9]*)['"]/ );
     48            }
     49
     50            if ( width && width[1] ) {
     51                width = width[1];
     52            }
     53
     54            if ( ! width || ! caption ) {
    4955                return c;
    5056            }
    5157
    52             width = parseInt( w, 10 );
     58            width = parseInt( width, 10 );
    5359            if ( ! editor.getParam( 'wpeditimage_html5_captions' ) ) {
    5460                width += 10;
    5561            }
    5662
    57             return '<div class="mceTemp"><dl id="'+ id +'" class="wp-caption '+ cls +'" style="width: '+ width +'px">' +
    58                 '<dt class="wp-caption-dt">'+ img +'</dt><dd class="wp-caption-dd">'+ cap +'</dd></dl></div>';
     63            return '<div class="mceTemp"><dl id="' + id + '" class="wp-caption ' + align + classes + '" style="width: ' + width + 'px">' +
     64                '<dt class="wp-caption-dt">'+ img +'</dt><dd class="wp-caption-dd">'+ caption +'</dd></dl></div>';
    5965        });
    6066    }
     
    7682            }
    7783
    78             out = b.replace( /<dl ([^>]+)>\s*<dt [^>]+>([\s\S]+?)<\/dt>\s*<dd [^>]+>([\s\S]*?)<\/dd>\s*<\/dl>/gi, function( a, b, c, cap ) {
    79                 var id, cls, w;
    80 
    81                 w = c.match( /width="([0-9]*)"/ );
    82                 w = ( w && w[1] ) ? w[1] : '';
    83 
    84                 if ( ! w || ! cap ) {
     84            out = b.replace( /<dl ([^>]+)>\s*<dt [^>]+>([\s\S]+?)<\/dt>\s*<dd [^>]+>([\s\S]*?)<\/dd>\s*<\/dl>/gi, function( a, b, c, caption ) {
     85                var id, classes, align, width;
     86
     87                width = c.match( /width="([0-9]*)"/ );
     88                width = ( width && width[1] ) ? width[1] : '';
     89
     90                if ( ! width || ! caption ) {
    8591                    return c;
    8692                }
     
    8995                id = ( id && id[1] ) ? id[1] : '';
    9096
    91                 cls = b.match( /class="([^"]*)"/ );
    92                 cls = ( cls && cls[1] ) ? cls[1] : '';
    93                 cls = cls.match( /align[a-z]+/ ) || 'alignnone';
    94 
    95                 cap = cap.replace( /\r\n|\r/g, '\n' ).replace( /<[a-zA-Z0-9]+( [^<>]+)?>/g, function( a ) {
     97                classes = b.match( /class="([^"]*)"/ );
     98                classes = ( classes && classes[1] ) ? classes[1] : '';
     99
     100                align = classes.match( /align[a-z]+/i ) || 'alignnone';
     101                classes = classes.replace( /wp-caption ?|align[a-z]+ ?/gi, '' );
     102
     103                if ( classes ) {
     104                    classes = ' class="' + classes + '"';
     105                }
     106
     107                caption = caption.replace( /\r\n|\r/g, '\n' ).replace( /<[a-zA-Z0-9]+( [^<>]+)?>/g, function( a ) {
    96108                    // no line breaks inside HTML tags
    97109                    return a.replace( /[\r\n\t]+/, ' ' );
     
    99111
    100112                // convert remaining line breaks to <br>
    101                 cap = cap.replace( /\s*\n\s*/g, '<br />' );
    102 
    103                 return '[caption id="'+ id +'" align="'+ cls +'" width="'+ w +'"]'+ c +' '+ cap +'[/caption]';
     113                caption = caption.replace( /\s*\n\s*/g, '<br />' );
     114
     115                return '[caption id="' + id + '" align="' + align + '" width="' + width + '"' + classes + ']' + c + ' ' + caption + '[/caption]';
    104116            });
    105117
     
    116128    function extractImageData( imageNode ) {
    117129        var classes, extraClasses, metadata, captionBlock, caption, link, width, height,
     130            captionClassName = [],
    118131            dom = editor.dom,
    119132            isIntRegExp = /^\d+$/;
     
    181194                if ( /^align/.test( name ) ) {
    182195                    metadata.align = name.replace( 'align', '' );
     196                } else if ( name && name !== 'wp-caption' ) {
     197                    captionClassName.push( name );
    183198                }
    184199            } );
     200
     201            metadata.captionClassName = captionClassName.join( ' ' );
    185202
    186203            caption = dom.select( 'dd.wp-caption-dd', captionBlock );
     
    211228    function updateImage( imageNode, imageData ) {
    212229        var classes, className, node, html, parent, wrap, linkNode,
    213             captionNode, dd, dl, id, attrs, linkAttrs, width, height,
     230            captionNode, dd, dl, id, attrs, linkAttrs, width, height, align,
    214231            dom = editor.dom;
    215232
     
    288305
    289306            id = imageData.attachment_id ? 'attachment_' + imageData.attachment_id : null;
    290             className = 'wp-caption align' + ( imageData.align || 'none' );
     307            align = 'align' + ( imageData.align || 'none' );
     308            className = 'wp-caption ' + align;
     309
     310            if ( imageData.captionClassName ) {
     311                className += ' ' + imageData.captionClassName.replace( /[<>&]+/g,  '' );
     312            }
    291313
    292314            if ( ! editor.getParam( 'wpeditimage_html5_captions' ) ) {
Note: See TracChangeset for help on using the changeset viewer.