You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

129 lines
3.5 KiB

  1. ( function( tinymce, wp, settings ) {
  2. tinymce.PluginManager.add( 'wpemoji', function( editor ) {
  3. var typing,
  4. env = tinymce.Env,
  5. ua = window.navigator.userAgent,
  6. isWin = ua.indexOf( 'Windows' ) > -1,
  7. isWin8 = ( function() {
  8. var match = ua.match( /Windows NT 6\.(\d)/ );
  9. if ( match && match[1] > 1 ) {
  10. return true;
  11. }
  12. return false;
  13. }());
  14. if ( ! wp || ! wp.emoji || settings.supports.everything ) {
  15. return;
  16. }
  17. function setImgAttr( image ) {
  18. image.className = 'emoji';
  19. image.setAttribute( 'data-mce-resize', 'false' );
  20. image.setAttribute( 'data-mce-placeholder', '1' );
  21. image.setAttribute( 'data-wp-emoji', '1' );
  22. }
  23. function replaceEmoji( node ) {
  24. var imgAttr = {
  25. 'data-mce-resize': 'false',
  26. 'data-mce-placeholder': '1',
  27. 'data-wp-emoji': '1'
  28. };
  29. wp.emoji.parse( node, { imgAttr: imgAttr } );
  30. }
  31. // Test if the node text contains emoji char(s) and replace.
  32. function parseNode( node ) {
  33. var selection, bookmark;
  34. if ( node && window.twemoji && window.twemoji.test( node.textContent || node.innerText ) ) {
  35. if ( env.webkit ) {
  36. selection = editor.selection;
  37. bookmark = selection.getBookmark();
  38. }
  39. replaceEmoji( node );
  40. if ( env.webkit ) {
  41. selection.moveToBookmark( bookmark );
  42. }
  43. }
  44. }
  45. if ( isWin8 ) {
  46. // Windows 8+ emoji can be "typed" with the onscreen keyboard.
  47. // That triggers the normal keyboard events, but not the 'input' event.
  48. // Thankfully it sets keyCode 231 when the onscreen keyboard inserts any emoji.
  49. editor.on( 'keyup', function( event ) {
  50. if ( event.keyCode === 231 ) {
  51. parseNode( editor.selection.getNode() );
  52. }
  53. } );
  54. } else if ( ! isWin ) {
  55. // In MacOS inserting emoji doesn't trigger the stanradr keyboard events.
  56. // Thankfully it triggers the 'input' event.
  57. // This works in Android and iOS as well.
  58. editor.on( 'keydown keyup', function( event ) {
  59. typing = ( event.type === 'keydown' );
  60. } );
  61. editor.on( 'input', function() {
  62. if ( typing ) {
  63. return;
  64. }
  65. parseNode( editor.selection.getNode() );
  66. });
  67. }
  68. editor.on( 'setcontent', function( event ) {
  69. var selection = editor.selection,
  70. node = selection.getNode();
  71. if ( window.twemoji && window.twemoji.test( node.textContent || node.innerText ) ) {
  72. replaceEmoji( node );
  73. // In IE all content in the editor is left selected after wp.emoji.parse()...
  74. // Collapse the selection to the beginning.
  75. if ( env.ie && env.ie < 9 && event.load && node && node.nodeName === 'BODY' ) {
  76. selection.collapse( true );
  77. }
  78. }
  79. } );
  80. // Convert Twemoji compatible pasted emoji replacement images into our format.
  81. editor.on( 'PastePostProcess', function( event ) {
  82. if ( window.twemoji ) {
  83. tinymce.each( editor.dom.$( 'img.emoji', event.node ), function( image ) {
  84. if ( image.alt && window.twemoji.test( image.alt ) ) {
  85. setImgAttr( image );
  86. }
  87. });
  88. }
  89. });
  90. editor.on( 'postprocess', function( event ) {
  91. if ( event.content ) {
  92. event.content = event.content.replace( /<img[^>]+data-wp-emoji="[^>]+>/g, function( img ) {
  93. var alt = img.match( /alt="([^"]+)"/ );
  94. if ( alt && alt[1] ) {
  95. return alt[1];
  96. }
  97. return img;
  98. });
  99. }
  100. } );
  101. editor.on( 'resolvename', function( event ) {
  102. if ( event.target.nodeName === 'IMG' && editor.dom.getAttrib( event.target, 'data-wp-emoji' ) ) {
  103. event.preventDefault();
  104. }
  105. } );
  106. } );
  107. } )( window.tinymce, window.wp, window._wpemojiSettings );