Emoji:
- Add the styling for the replacement images to the admin CSS. - Revert to using `.emoji` as replacement image class. - When pasting in the editor, convert emoji images to our format so we can replace them with chars on saving. - Some more clean up of both the plugin and wp-emoji.js. See #31242. git-svn-id: https://develop.svn.wordpress.org/trunk@31786 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
parent
b69fe9bd6a
commit
005ff9a8c8
|
@ -679,6 +679,20 @@ td.help {
|
|||
color: #999;
|
||||
}
|
||||
|
||||
/* For emoji replacement images */
|
||||
img.emoji {
|
||||
display: inline !important;
|
||||
border: none !important;
|
||||
height: 1em !important;
|
||||
width: 1em !important;
|
||||
margin: 0 .07em !important;
|
||||
vertical-align: -0.1em !important;
|
||||
background: none !important;
|
||||
padding: 0 !important;
|
||||
-webkit-box-shadow: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
/*------------------------------------------------------------------------------
|
||||
1.0 - Text Styles
|
||||
------------------------------------------------------------------------------*/
|
||||
|
|
|
@ -254,7 +254,6 @@ add_action( 'sanitize_comment_cookies', 'sanitize_comment_cookies'
|
|||
add_action( 'admin_print_scripts', 'print_head_scripts', 20 );
|
||||
add_action( 'admin_print_footer_scripts', '_wp_footer_scripts' );
|
||||
add_action( 'admin_print_styles', 'print_admin_styles', 20 );
|
||||
add_action( 'admin_print_styles', 'print_emoji_styles' );
|
||||
add_action( 'init', 'smilies_init', 5 );
|
||||
add_action( 'plugins_loaded', 'wp_maybe_load_widgets', 0 );
|
||||
add_action( 'plugins_loaded', 'wp_maybe_load_embeds', 0 );
|
||||
|
|
|
@ -4046,7 +4046,7 @@ img.emoji {
|
|||
box-shadow: none !important;
|
||||
height: 1em !important;
|
||||
width: 1em !important;
|
||||
margin: 0 .05em 0 .1em !important;
|
||||
margin: 0 .07em !important;
|
||||
vertical-align: -0.1em !important;
|
||||
background: none !important;
|
||||
padding: 0 !important;
|
||||
|
|
|
@ -1,52 +1,76 @@
|
|||
( function( tinymce, wp ) {
|
||||
( function( tinymce, wp, twemoji ) {
|
||||
tinymce.PluginManager.add( 'wpemoji', function( editor ) {
|
||||
var typing,
|
||||
isMacWebKit = tinymce.Env.mac && tinymce.Env.webkit;
|
||||
|
||||
if ( ! wp || ! wp.emoji ) {
|
||||
if ( ! wp || ! wp.emoji || ! wp.emoji.replaceEmoji ) {
|
||||
return;
|
||||
}
|
||||
|
||||
function setImgAttr( image ) {
|
||||
image.className = 'emoji';
|
||||
image.setAttribute( 'data-mce-resize', 'false' );
|
||||
image.setAttribute( 'data-mce-placeholder', '1' );
|
||||
image.setAttribute( 'data-wp-emoji', image.alt );
|
||||
}
|
||||
|
||||
function replaceEmoji( node ) {
|
||||
wp.emoji.parse( node, { className: 'emoji _inserted-emoji' } );
|
||||
tinymce.each( editor.dom.$( 'img._inserted-emoji', node ), setImgAttr );
|
||||
}
|
||||
|
||||
editor.on( 'keydown keyup', function( event ) {
|
||||
typing = event.type === 'keydown';
|
||||
} );
|
||||
|
||||
editor.on( 'input setcontent', function( event ) {
|
||||
var selection, node, bookmark, images;
|
||||
|
||||
if ( typing && event.type === 'input' ) {
|
||||
editor.on( 'input', function( event ) {
|
||||
if ( typing ) {
|
||||
return;
|
||||
}
|
||||
|
||||
selection = editor.selection;
|
||||
node = selection.getNode();
|
||||
var bookmark,
|
||||
selection = editor.selection,
|
||||
node = selection.getNode();
|
||||
|
||||
if ( isMacWebKit ) {
|
||||
bookmark = selection.getBookmark();
|
||||
if ( twemoji.test( node.textContent || node.innerText ) ) {
|
||||
if ( isMacWebKit ) {
|
||||
bookmark = selection.getBookmark();
|
||||
}
|
||||
|
||||
replaceEmoji( node );
|
||||
|
||||
if ( isMacWebKit ) {
|
||||
selection.moveToBookmark( bookmark );
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
wp.emoji.parse( node, { className: 'wp-emoji new-emoji' } );
|
||||
editor.on( 'setcontent', function( event ) {
|
||||
var selection = editor.selection,
|
||||
node = selection.getNode();
|
||||
|
||||
images = editor.dom.select( 'img.new-emoji', node );
|
||||
if ( twemoji.test( node.textContent || node.innerText ) ) {
|
||||
replaceEmoji( node );
|
||||
|
||||
tinymce.each( images, function( image ) {
|
||||
image.className = 'wp-emoji';
|
||||
image.setAttribute( 'data-mce-resize', 'false' );
|
||||
image.setAttribute( 'data-mce-placeholder', '1' );
|
||||
image.setAttribute( 'data-wp-emoji', image.alt );
|
||||
} );
|
||||
|
||||
// In IE all content in the editor is left selected aftrer wp.emoji.parse()...
|
||||
// Collapse the selection to the beginning.
|
||||
if ( tinymce.Env.ie && node && node.nodeName === 'BODY' ) {
|
||||
selection.collapse( true );
|
||||
}
|
||||
|
||||
if ( isMacWebKit ) {
|
||||
selection.moveToBookmark( bookmark );
|
||||
// In IE all content in the editor is left selected aftrer wp.emoji.parse()...
|
||||
// Collapse the selection to the beginning.
|
||||
if ( tinymce.Env.ie && tinymce.Env.ie < 9 && event.load && node && node.nodeName === 'BODY' ) {
|
||||
selection.collapse( true );
|
||||
}
|
||||
}
|
||||
} );
|
||||
|
||||
// Convert Twemoji compatible pasted emoji repacement images into our format.
|
||||
editor.on( 'PastePostProcess', function( event ) {
|
||||
if ( twemoji ) {
|
||||
tinymce.each( editor.dom.$( 'img.emoji', event.node ), function( image ) {
|
||||
if ( image.alt && twemoji.test( image.alt ) ) {
|
||||
setImgAttr( image );
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
editor.on( 'postprocess', function( event ) {
|
||||
if ( event.content ) {
|
||||
event.content = event.content.replace( /<img[^>]+data-wp-emoji="([^"]+)"[^>]*>/g, function( match, emoji ) {
|
||||
|
@ -61,4 +85,4 @@
|
|||
}
|
||||
} );
|
||||
} );
|
||||
} )( window.tinymce, window.wp );
|
||||
} )( window.tinymce, window.wp, window.twemoji );
|
||||
|
|
|
@ -58,12 +58,14 @@ th {
|
|||
}
|
||||
|
||||
/* For emoji replacement images */
|
||||
img.wp-emoji {
|
||||
img.emoji {
|
||||
display: inline !important;
|
||||
border: none !important;
|
||||
height: 1em !important;
|
||||
width: 1em !important;
|
||||
margin: 0 0.07em !important;
|
||||
margin: 0 .07em !important;
|
||||
vertical-align: -0.1em !important;
|
||||
border: none !important;
|
||||
background: none !important;
|
||||
padding: 0 !important;
|
||||
-webkit-box-shadow: none !important;
|
||||
box-shadow: none !important;
|
||||
|
|
|
@ -4,31 +4,31 @@
|
|||
var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver,
|
||||
|
||||
/**
|
||||
* Flag to determine if we should parse all emoji characters into Twemoji images.
|
||||
* Flag to determine if the browser and the OS support emoji.
|
||||
*
|
||||
* @since 4.2.0
|
||||
*
|
||||
* @var Boolean
|
||||
*/
|
||||
parseAllEmoji = false,
|
||||
supportsEmoji = false,
|
||||
|
||||
/**
|
||||
* Flag to determine if we should consider parsing emoji characters into Twemoji images.
|
||||
* Flag to determine if the browser and the OS support flag (two character) emoji.
|
||||
*
|
||||
* @since 4.2.0
|
||||
*
|
||||
* @var Boolean
|
||||
*/
|
||||
parseEmoji = false,
|
||||
supportsFlagEmoji = false,
|
||||
|
||||
/**
|
||||
* Flag to determine if we should parse flag characters into Twemoji images.
|
||||
* Flag to determine if we should replace emoji characters with images.
|
||||
*
|
||||
* @since 4.2.0
|
||||
*
|
||||
* @var Boolean
|
||||
*/
|
||||
parseFlags = false;
|
||||
replaceEmoji = false;
|
||||
|
||||
/**
|
||||
* Runs when the document load event is fired, so we can do our first parse of the page.
|
||||
|
@ -39,8 +39,7 @@
|
|||
if ( MutationObserver ) {
|
||||
new MutationObserver( function( mutationRecords ) {
|
||||
var i = mutationRecords.length,
|
||||
ii,
|
||||
node;
|
||||
ii, node;
|
||||
|
||||
while ( i-- ) {
|
||||
ii = mutationRecords[ i ].addedNodes.length;
|
||||
|
@ -57,9 +56,7 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
} )
|
||||
|
||||
.observe( document.body, {
|
||||
} ).observe( document.body, {
|
||||
childList: true,
|
||||
subtree: true
|
||||
} );
|
||||
|
@ -74,7 +71,7 @@
|
|||
*
|
||||
* @since 4.2.0
|
||||
*
|
||||
* @param flagEmoji {Boolean} Whether to test for support of flag emoji.
|
||||
* @param type {String} Whether to test for support of "simple" or "flag" emoji.
|
||||
* @return {Boolean} True if the browser can render emoji, false if it cannot.
|
||||
*/
|
||||
function browserSupportsEmoji( type ) {
|
||||
|
@ -117,13 +114,14 @@
|
|||
* @since 4.2.0
|
||||
*
|
||||
* @param {HTMLElement|String} object The element or string to parse.
|
||||
* @param {Object} args Additional options for Twemoji.
|
||||
*/
|
||||
function parse( object, options ) {
|
||||
if ( ! parseEmoji ) {
|
||||
function parse( object, args ) {
|
||||
if ( ! replaceEmoji ) {
|
||||
return object;
|
||||
}
|
||||
|
||||
var className = ( options && options.className ) || 'emoji';
|
||||
var className = ( args && args.className ) || 'emoji';
|
||||
|
||||
return twemoji.parse( object, {
|
||||
base: settings.baseUrl,
|
||||
|
@ -143,7 +141,7 @@
|
|||
return false;
|
||||
}
|
||||
|
||||
if ( parseFlags && ! parseAllEmoji &&
|
||||
if ( ! supportsFlagEmoji && supportsEmoji &&
|
||||
! /^1f1(?:e[6-9a-f]|f[1-9a-f])-1f1(?:e[6-9a-f]|f[1-9a-f])$/.test( icon ) ) {
|
||||
|
||||
return false;
|
||||
|
@ -158,10 +156,10 @@
|
|||
* Initialize our emoji support, and set up listeners.
|
||||
*/
|
||||
if ( twemoji && settings ) {
|
||||
parseAllEmoji = ! browserSupportsEmoji();
|
||||
parseFlags = ! browserSupportsEmoji( 'flag' );
|
||||
parseEmoji = parseAllEmoji || parseFlags;
|
||||
|
||||
supportsEmoji = browserSupportsEmoji();
|
||||
supportsFlagEmoji = browserSupportsEmoji( 'flag' );
|
||||
replaceEmoji = ! supportsEmoji || ! supportsFlagEmoji;
|
||||
|
||||
if ( window.addEventListener ) {
|
||||
window.addEventListener( 'load', load, false );
|
||||
} else if ( window.attachEvent ) {
|
||||
|
@ -171,6 +169,7 @@
|
|||
|
||||
return {
|
||||
browserSupportsEmoji: browserSupportsEmoji,
|
||||
replaceEmoji: replaceEmoji,
|
||||
parse: parse
|
||||
};
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue