Açıklama Yok

plugin.js 3.5KB

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