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.
 
 
 
 
 

209 lines
5.5 KiB

  1. /**
  2. * WordPress View plugin.
  3. */
  4. ( function( tinymce, wp ) {
  5. tinymce.PluginManager.add( 'wpview', function( editor ) {
  6. function noop () {}
  7. if ( ! wp || ! wp.mce || ! wp.mce.views ) {
  8. return {
  9. getView: noop
  10. };
  11. }
  12. // Check if a node is a view or not.
  13. function isView( node ) {
  14. return editor.dom.hasClass( node, 'wpview' );
  15. }
  16. // Replace view tags with their text.
  17. function resetViews( content ) {
  18. function callback( match, $1 ) {
  19. return '<p>' + window.decodeURIComponent( $1 ) + '</p>';
  20. }
  21. if ( ! content ) {
  22. return content;
  23. }
  24. return content
  25. .replace( /<div[^>]+data-wpview-text="([^"]+)"[^>]*>(?:\.|[\s\S]+?wpview-end[^>]+>\s*<\/span>\s*)?<\/div>/g, callback )
  26. .replace( /<p[^>]+data-wpview-marker="([^"]+)"[^>]*>[\s\S]*?<\/p>/g, callback );
  27. }
  28. editor.on( 'init', function() {
  29. var MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
  30. if ( MutationObserver ) {
  31. new MutationObserver( function() {
  32. editor.fire( 'wp-body-class-change' );
  33. } )
  34. .observe( editor.getBody(), {
  35. attributes: true,
  36. attributeFilter: ['class']
  37. } );
  38. }
  39. // Pass on body class name changes from the editor to the wpView iframes.
  40. editor.on( 'wp-body-class-change', function() {
  41. var className = editor.getBody().className;
  42. editor.$( 'iframe[class="wpview-sandbox"]' ).each( function( i, iframe ) {
  43. // Make sure it is a local iframe
  44. // jshint scripturl: true
  45. if ( ! iframe.src || iframe.src === 'javascript:""' ) {
  46. try {
  47. iframe.contentWindow.document.body.className = className;
  48. } catch( er ) {}
  49. }
  50. });
  51. } );
  52. });
  53. // Scan new content for matching view patterns and replace them with markers.
  54. editor.on( 'beforesetcontent', function( event ) {
  55. var node;
  56. if ( ! event.selection ) {
  57. wp.mce.views.unbind();
  58. }
  59. if ( ! event.content ) {
  60. return;
  61. }
  62. if ( ! event.load ) {
  63. node = editor.selection.getNode();
  64. if ( node && node !== editor.getBody() && /^\s*https?:\/\/\S+\s*$/i.test( event.content ) ) {
  65. // When a url is pasted or inserted, only try to embed it when it is in an empty paragrapgh.
  66. node = editor.dom.getParent( node, 'p' );
  67. if ( node && /^[\s\uFEFF\u00A0]*$/.test( editor.$( node ).text() || '' ) ) {
  68. // Make sure there are no empty inline elements in the <p>
  69. node.innerHTML = '';
  70. } else {
  71. return;
  72. }
  73. }
  74. }
  75. event.content = wp.mce.views.setMarkers( event.content );
  76. } );
  77. // Replace any new markers nodes with views.
  78. editor.on( 'setcontent', function( event ) {
  79. if ( event.load && ! event.initial && editor.quirks.refreshContentEditable ) {
  80. // Make sure there is a selection in Gecko browsers.
  81. // Or it will refresh the content internally which resets the iframes.
  82. editor.quirks.refreshContentEditable();
  83. }
  84. wp.mce.views.render();
  85. } );
  86. // Empty view nodes for easier processing.
  87. editor.on( 'preprocess hide', function( event ) {
  88. editor.$( 'div[data-wpview-text], p[data-wpview-marker]', event.node ).each( function( i, node ) {
  89. node.innerHTML = '.';
  90. } );
  91. }, true );
  92. // Replace views with their text.
  93. editor.on( 'postprocess', function( event ) {
  94. event.content = resetViews( event.content );
  95. } );
  96. // Replace views with their text inside undo levels.
  97. // This also prevents that new levels are added when there are changes inside the views.
  98. editor.on( 'beforeaddundo', function( event ) {
  99. event.level.content = resetViews( event.level.content );
  100. } );
  101. // Make sure views are copied as their text.
  102. editor.on( 'drop objectselected', function( event ) {
  103. if ( isView( event.targetClone ) ) {
  104. event.targetClone = editor.getDoc().createTextNode(
  105. window.decodeURIComponent( editor.dom.getAttrib( event.targetClone, 'data-wpview-text' ) )
  106. );
  107. }
  108. } );
  109. // Clean up URLs for easier processing.
  110. editor.on( 'pastepreprocess', function( event ) {
  111. var content = event.content;
  112. if ( content ) {
  113. content = tinymce.trim( content.replace( /<[^>]+>/g, '' ) );
  114. if ( /^https?:\/\/\S+$/i.test( content ) ) {
  115. event.content = content;
  116. }
  117. }
  118. } );
  119. // Show the view type in the element path.
  120. editor.on( 'resolvename', function( event ) {
  121. if ( isView( event.target ) ) {
  122. event.name = editor.dom.getAttrib( event.target, 'data-wpview-type' ) || 'object';
  123. }
  124. } );
  125. // See `media` plugin.
  126. editor.on( 'click keyup', function() {
  127. var node = editor.selection.getNode();
  128. if ( isView( node ) ) {
  129. if ( editor.dom.getAttrib( node, 'data-mce-selected' ) ) {
  130. node.setAttribute( 'data-mce-selected', '2' );
  131. }
  132. }
  133. } );
  134. editor.addButton( 'wp_view_edit', {
  135. tooltip: 'Edit ', // trailing space is needed, used for context
  136. icon: 'dashicon dashicons-edit',
  137. onclick: function() {
  138. var node = editor.selection.getNode();
  139. if ( isView( node ) ) {
  140. wp.mce.views.edit( editor, node );
  141. }
  142. }
  143. } );
  144. editor.addButton( 'wp_view_remove', {
  145. tooltip: 'Remove',
  146. icon: 'dashicon dashicons-no',
  147. onclick: function() {
  148. editor.fire( 'cut' );
  149. }
  150. } );
  151. editor.once( 'preinit', function() {
  152. var toolbar;
  153. if ( editor.wp && editor.wp._createToolbar ) {
  154. toolbar = editor.wp._createToolbar( [
  155. 'wp_view_edit',
  156. 'wp_view_remove'
  157. ] );
  158. editor.on( 'wptoolbar', function( event ) {
  159. if ( isView( event.element ) ) {
  160. event.toolbar = toolbar;
  161. }
  162. } );
  163. }
  164. } );
  165. editor.wp = editor.wp || {};
  166. editor.wp.getView = noop;
  167. editor.wp.setViewCursor = noop;
  168. return {
  169. getView: noop
  170. };
  171. } );
  172. } )( window.tinymce, window.wp );