wp/wp-admin/js/editor.js
changeset 22 8c2e4d02f4ef
parent 21 48c4eec2b7e6
equal deleted inserted replaced
21:48c4eec2b7e6 22:8c2e4d02f4ef
    20 			if ( ! tinymce && window.tinymce ) {
    20 			if ( ! tinymce && window.tinymce ) {
    21 				tinymce = window.tinymce;
    21 				tinymce = window.tinymce;
    22 				$$ = tinymce.$;
    22 				$$ = tinymce.$;
    23 
    23 
    24 				/**
    24 				/**
    25 				 * Handles onclick events for the Visual/Text tabs.
    25 				 * Handles onclick events for the Visual/Code tabs.
    26 				 *
    26 				 *
    27 				 * @since 4.3.0
    27 				 * @since 4.3.0
    28 				 *
    28 				 *
    29 				 * @return {void}
    29 				 * @return {void}
    30 				 */
    30 				 */
    60 
    60 
    61 			return 30;
    61 			return 30;
    62 		}
    62 		}
    63 
    63 
    64 		/**
    64 		/**
    65 		 * Switches the editor between Visual and Text mode.
    65 		 * Switches the editor between Visual and Code mode.
    66 		 *
    66 		 *
    67 		 * @since 2.5.0
    67 		 * @since 2.5.0
    68 		 *
    68 		 *
    69 		 * @memberof switchEditors
    69 		 * @memberof switchEditors
    70 		 *
    70 		 *
    77 			mode = mode || 'toggle';
    77 			mode = mode || 'toggle';
    78 
    78 
    79 			var editorHeight, toolbarHeight, iframe,
    79 			var editorHeight, toolbarHeight, iframe,
    80 				editor = tinymce.get( id ),
    80 				editor = tinymce.get( id ),
    81 				wrap = $$( '#wp-' + id + '-wrap' ),
    81 				wrap = $$( '#wp-' + id + '-wrap' ),
       
    82 				htmlSwitch = wrap.find( '.switch-tmce' ),
       
    83 				tmceSwitch = wrap.find( '.switch-html' ),
    82 				$textarea = $$( '#' + id ),
    84 				$textarea = $$( '#' + id ),
    83 				textarea = $textarea[0];
    85 				textarea = $textarea[0];
    84 
    86 
    85 			if ( 'toggle' === mode ) {
    87 			if ( 'toggle' === mode ) {
    86 				if ( editor && ! editor.isHidden() ) {
    88 				if ( editor && ! editor.isHidden() ) {
   101 					window.QTags.closeAllTags( id );
   103 					window.QTags.closeAllTags( id );
   102 				}
   104 				}
   103 
   105 
   104 				editorHeight = parseInt( textarea.style.height, 10 ) || 0;
   106 				editorHeight = parseInt( textarea.style.height, 10 ) || 0;
   105 
   107 
   106 				var keepSelection = false;
   108 				addHTMLBookmarkInTextAreaContent( $textarea );
   107 				if ( editor ) {
       
   108 					keepSelection = editor.getParam( 'wp_keep_scroll_position' );
       
   109 				} else {
       
   110 					keepSelection = window.tinyMCEPreInit.mceInit[ id ] &&
       
   111 									window.tinyMCEPreInit.mceInit[ id ].wp_keep_scroll_position;
       
   112 				}
       
   113 
       
   114 				if ( keepSelection ) {
       
   115 					// Save the selection.
       
   116 					addHTMLBookmarkInTextAreaContent( $textarea );
       
   117 				}
       
   118 
   109 
   119 				if ( editor ) {
   110 				if ( editor ) {
   120 					editor.show();
   111 					editor.show();
   121 
   112 
   122 					// No point to resize the iframe in iOS.
   113 					// No point to resize the iframe in iOS.
   128 						if ( editorHeight > 50 && editorHeight < 5000 ) {
   119 						if ( editorHeight > 50 && editorHeight < 5000 ) {
   129 							editor.theme.resizeTo( null, editorHeight );
   120 							editor.theme.resizeTo( null, editorHeight );
   130 						}
   121 						}
   131 					}
   122 					}
   132 
   123 
   133 					if ( editor.getParam( 'wp_keep_scroll_position' ) ) {
   124 					focusHTMLBookmarkInVisualEditor( editor );
   134 						// Restore the selection.
       
   135 						focusHTMLBookmarkInVisualEditor( editor );
       
   136 					}
       
   137 				} else {
   125 				} else {
   138 					tinymce.init( window.tinyMCEPreInit.mceInit[ id ] );
   126 					tinymce.init( window.tinyMCEPreInit.mceInit[ id ] );
   139 				}
   127 				}
   140 
   128 
   141 				wrap.removeClass( 'html-active' ).addClass( 'tmce-active' );
   129 				wrap.removeClass( 'html-active' ).addClass( 'tmce-active' );
       
   130 				tmceSwitch.attr( 'aria-pressed', false );
       
   131 				htmlSwitch.attr( 'aria-pressed', true );
   142 				$textarea.attr( 'aria-hidden', true );
   132 				$textarea.attr( 'aria-hidden', true );
   143 				window.setUserSetting( 'editor', 'tinymce' );
   133 				window.setUserSetting( 'editor', 'tinymce' );
   144 
   134 
   145 			} else if ( 'html' === mode ) {
   135 			} else if ( 'html' === mode ) {
   146 				// If the editor is hidden (Quicktags is shown) we don't need to switch.
   136 				// If the editor is hidden (Quicktags is shown) we don't need to switch.
   166 						}
   156 						}
   167 					}
   157 					}
   168 
   158 
   169 					var selectionRange = null;
   159 					var selectionRange = null;
   170 
   160 
   171 					if ( editor.getParam( 'wp_keep_scroll_position' ) ) {
   161 					selectionRange = findBookmarkedPosition( editor );
   172 						selectionRange = findBookmarkedPosition( editor );
       
   173 					}
       
   174 
   162 
   175 					editor.hide();
   163 					editor.hide();
   176 
   164 
   177 					if ( selectionRange ) {
   165 					if ( selectionRange ) {
   178 						selectTextInTextArea( editor, selectionRange );
   166 						selectTextInTextArea( editor, selectionRange );
   182 					// The TinyMCE editor instance doesn't exist. Show the textarea.
   170 					// The TinyMCE editor instance doesn't exist. Show the textarea.
   183 					$textarea.css({ 'display': '', 'visibility': '' });
   171 					$textarea.css({ 'display': '', 'visibility': '' });
   184 				}
   172 				}
   185 
   173 
   186 				wrap.removeClass( 'tmce-active' ).addClass( 'html-active' );
   174 				wrap.removeClass( 'tmce-active' ).addClass( 'html-active' );
       
   175 				tmceSwitch.attr( 'aria-pressed', true );
       
   176 				htmlSwitch.attr( 'aria-pressed', false );
   187 				$textarea.attr( 'aria-hidden', false );
   177 				$textarea.attr( 'aria-hidden', false );
   188 				window.setUserSetting( 'editor', 'html' );
   178 				window.setUserSetting( 'editor', 'html' );
   189 			}
   179 			}
   190 		}
   180 		}
   191 
   181 
   518 
   508 
   519 		/**
   509 		/**
   520 		 * Focuses the selection markers in Visual mode.
   510 		 * Focuses the selection markers in Visual mode.
   521 		 *
   511 		 *
   522 		 * The method checks for existing selection markers inside the editor DOM (Visual mode)
   512 		 * The method checks for existing selection markers inside the editor DOM (Visual mode)
   523 		 * and create a selection between the two nodes using the DOM `createRange` selection API
   513 		 * and create a selection between the two nodes using the DOM `createRange` selection API.
   524 		 *
   514 		 *
   525 		 * If there is only a single node, select only the single node through TinyMCE's selection API
   515 		 * If there is only a single node, select only the single node through TinyMCE's selection API
   526 		 *
   516 		 *
   527 		 * @param {Object} editor TinyMCE editor instance.
   517 		 * @param {Object} editor TinyMCE editor instance.
   528 		 */
   518 		 */
   543 
   533 
   544 					editor.selection.setRng( selection );
   534 					editor.selection.setRng( selection );
   545 				}
   535 				}
   546 			}
   536 			}
   547 
   537 
   548 			if ( editor.getParam( 'wp_keep_scroll_position' ) ) {
   538 			scrollVisualModeToStartElement( editor, startNode );
   549 				scrollVisualModeToStartElement( editor, startNode );
       
   550 			}
       
   551 
   539 
   552 			removeSelectionMarker( startNode );
   540 			removeSelectionMarker( startNode );
   553 			removeSelectionMarker( endNode );
   541 			removeSelectionMarker( endNode );
   554 
   542 
   555 			editor.save();
   543 			editor.save();
   848 					textArea.focus();
   836 					textArea.focus();
   849 				}, 100 );
   837 				}, 100 );
   850 			}
   838 			}
   851 		}
   839 		}
   852 
   840 
   853 		// Restore the selection when the editor is initialized. Needed when the Text editor is the default.
   841 		// Restore the selection when the editor is initialized. Needed when the Code editor is the default.
   854 		$( document ).on( 'tinymce-editor-init.keep-scroll-position', function( event, editor ) {
   842 		$( document ).on( 'tinymce-editor-init.keep-scroll-position', function( event, editor ) {
   855 			if ( editor.$( '.mce_SELRES_start' ).length ) {
   843 			if ( editor.$( '.mce_SELRES_start' ).length ) {
   856 				focusHTMLBookmarkInVisualEditor( editor );
   844 				focusHTMLBookmarkInVisualEditor( editor );
   857 			}
   845 			}
   858 		} );
   846 		} );
  1213 	window.switchEditors = new SwitchEditors();
  1201 	window.switchEditors = new SwitchEditors();
  1214 
  1202 
  1215 	/**
  1203 	/**
  1216 	 * Initialize TinyMCE and/or Quicktags. For use with wp_enqueue_editor() (PHP).
  1204 	 * Initialize TinyMCE and/or Quicktags. For use with wp_enqueue_editor() (PHP).
  1217 	 *
  1205 	 *
  1218 	 * Intended for use with an existing textarea that will become the Text editor tab.
  1206 	 * Intended for use with an existing textarea that will become the Code editor tab.
  1219 	 * The editor width will be the width of the textarea container, height will be adjustable.
  1207 	 * The editor width will be the width of the textarea container, height will be adjustable.
  1220 	 *
  1208 	 *
  1221 	 * Settings for both TinyMCE and Quicktags can be passed on initialization, and are "filtered"
  1209 	 * Settings for both TinyMCE and Quicktags can be passed on initialization, and are "filtered"
  1222 	 * with custom jQuery events on the document element, wp-before-tinymce-init and wp-before-quicktags-init.
  1210 	 * with custom jQuery events on the document element, wp-before-tinymce-init and wp-before-quicktags-init.
  1223 	 *
  1211 	 *
  1256 			settings = {
  1244 			settings = {
  1257 				tinymce: true
  1245 				tinymce: true
  1258 			};
  1246 			};
  1259 		}
  1247 		}
  1260 
  1248 
  1261 		// Add wrap and the Visual|Text tabs.
  1249 		// Add wrap and the Visual|Code tabs.
  1262 		if ( settings.tinymce && settings.quicktags ) {
  1250 		if ( settings.tinymce && settings.quicktags ) {
  1263 			var $textarea = $( '#' + id );
  1251 			var $textarea = $( '#' + id );
  1264 
  1252 
  1265 			var $wrap = $( '<div>' ).attr( {
  1253 			var $wrap = $( '<div>' ).attr( {
  1266 					'class': 'wp-core-ui wp-editor-wrap tmce-active',
  1254 					'class': 'wp-core-ui wp-editor-wrap tmce-active',
  1303 							'class': 'wp-switch-editor switch-tmce'
  1291 							'class': 'wp-switch-editor switch-tmce'
  1304 						}).text( window.tinymce.translate( 'Visual' ) ) )
  1292 						}).text( window.tinymce.translate( 'Visual' ) ) )
  1305 						.append( $button.attr({
  1293 						.append( $button.attr({
  1306 							id: id + '-html',
  1294 							id: id + '-html',
  1307 							'class': 'wp-switch-editor switch-html'
  1295 							'class': 'wp-switch-editor switch-html'
  1308 						}).text( window.tinymce.translate( 'Text' ) ) )
  1296 						}).text( window.tinymce.translate( 'Code|tab' ) ) )
  1309 					).append( $editorContainer )
  1297 					).append( $editorContainer )
  1310 			);
  1298 			);
  1311 
  1299 
  1312 			$textarea.after( $wrap );
  1300 			$textarea.after( $wrap );
  1313 			$editorContainer.append( $textarea );
  1301 			$editorContainer.append( $textarea );