WordPress.org

Make WordPress Core

Changeset 31948


Ignore:
Timestamp:
04/01/2015 02:38:25 AM (5 years ago)
Author:
azaozz
Message:

Emoji:

  • Enhance twemoji.js to support passing of additional attributes for the replacement images.
  • Use that to add the needed attributes when replacing emoji inside the editor.

Fixes #31627.

Location:
trunk/src/wp-includes/js
Files:
3 edited

Legend:

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

    r31946 r31948  
    2323            image.setAttribute( 'data-mce-resize', 'false' );
    2424            image.setAttribute( 'data-mce-placeholder', '1' );
    25             image.setAttribute( 'data-wp-emoji', image.alt );
     25            image.setAttribute( 'data-wp-emoji', '1' );
    2626        }
    2727
    2828        function replaceEmoji( node ) {
    29             wp.emoji.parse( node, { className: 'emoji _inserted-emoji' } );
    30             tinymce.each( editor.dom.$( 'img._inserted-emoji', node ), setImgAttr );
     29            var imgAttr = {
     30                'data-mce-resize': 'false',
     31                'data-mce-placeholder': '1',
     32                'data-wp-emoji': '1'
     33            };
     34
     35            wp.emoji.parse( node, { imgAttr: imgAttr } );
    3136        }
    3237
     
    103108        editor.on( 'postprocess', function( event ) {
    104109            if ( event.content ) {
    105                 event.content = event.content.replace( /<img[^>]+data-wp-emoji="([^"]+)"[^>]*>/g, '$1' );
     110                event.content = event.content.replace( /<img[^>]+data-wp-emoji="[^>]+>/g, function( img ) {
     111                    var alt = img.match( /alt="([^"]+)"/ );
     112
     113                    if ( alt && alt[1] ) {
     114                        return alt[1];
     115                    }
     116
     117                    return img;
     118                });
    106119            }
    107120        } );
  • trunk/src/wp-includes/js/twemoji.js

    r31779 r31948  
    338338      icon,
    339339      variant,
    340       src;
     340      src,
     341      attr;
    341342    while (length--) {
    342343      modified = false;
     
    364365          if (src) {
    365366            img = new Image();
     367
     368            // Set additional image attributes.
     369            if ( options.imgAttr ) {
     370              for ( attr in options.imgAttr ) {
     371                img.setAttribute( attr, options.imgAttr[attr] );
     372              }
     373            }
     374
    366375            img.onerror = twemoji.onerror;
    367376            img.className = options.className;
     
    407416  function parseString(str, options) {
    408417    return replace(str, function (match, icon, variant) {
    409       var src;
     418      var src, attr, attributes = '';
    410419      // verify the variant is not the FE0E one
    411420      // this variant means "emoji as text" and should not
     
    419428        );
    420429        if (src) {
     430          // Set additional image attributes.
     431          if ( options.imgAttr ) {
     432            for ( attr in options.imgAttr ) {
     433              if ( ! /draggable|class|alt|src/i.test( attr ) ) {
     434                attributes += ' '.concat( attr, '="', options.imgAttr[attr], '"' );
     435              }
     436            }
     437          }
     438
    421439          // recycle the match string replacing the emoji
    422440          // with its image counter part
     
    432450            src,
    433451            '"',
     452            attributes,
    434453            '>'
    435454          );
     
    484503      ext:      how.ext || twemoji.ext,
    485504      size:     how.folder || toSizeSquaredAsset(how.size || twemoji.size),
    486       className:how.className || twemoji.className
     505      className:how.className || twemoji.className,
     506      imgAttr:  how.imgAttr
    487507    });
    488508  }
  • trunk/src/wp-includes/js/wp-emoji.js

    r31898 r31948  
    101101            }
    102102
    103             var className = ( args && args.className ) || 'emoji';
     103            args = args || {};
    104104
    105105            return twemoji.parse( object, {
    106106                base: settings.baseUrl,
    107107                ext: settings.ext,
    108                 className: className,
     108                className: args.className || 'emoji',
     109                imgAttr: args.imgAttr,
    109110                callback: function( icon, options ) {
    110111                    // Ignore some standard characters that TinyMCE recommends in its character map.
Note: See TracChangeset for help on using the changeset viewer.