vhad/wordpress-develop
1
0
Fork 0
mirror of https://github.com/gosticks/wordpress-develop.git synced 2026-08-16 23:00:21 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Emoji:

Browse Source 
- 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:
Andrew Ozz
2015-03-15 23:15:28 +00:00
parent b69fe9bd6a
commit 005ff9a8c8
6 changed files with 91 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/wp-includes/js/tinymce/plugins/wpemoji/plugin.js
+52 -28
View File
@@ -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 );
src/wp-includes/js/tinymce/skins/wordpress/wp-content.css
+5 -3
View File
@@ -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;