diff --git a/src/wp-admin/js/editor.js b/src/wp-admin/js/editor.js index 002cf4a11f..17d296276d 100644 --- a/src/wp-admin/js/editor.js +++ b/src/wp-admin/js/editor.js @@ -1,43 +1,24 @@ ( function( $ ) { /** - * @summary Creates the tinyMCE editors. + * @summary Utility functions for the editor. * - * Creates the tinyMCE editor and binds all events used for switching - * from visual to text mode. - * - * @since 4.3.0 - * - * @class + * @since 2.5.0 */ function SwitchEditors() { var tinymce, $$, exports = {}; - /** - * @summary Initializes the event binding for switching editors. - * - * @since 4.3.0 - * - * @returns {void} - */ function init() { if ( ! tinymce && window.tinymce ) { tinymce = window.tinymce; $$ = tinymce.$; /** - * @summary Handles onclick events for the editor buttons. + * @summary Handles onclick events for the Visual/Text tabs. * * @since 4.3.0 * - * Handles an onclick event on the document. - * Switches the editor between visual and text, - * if the clicked element has the 'wp-switch-editor' class. - * If the class name is switch-html switches to the HTML editor, - * if the class name is switch-tmce - * switches to the TMCE editor. - * * @returns {void} */ $$( document ).on( 'click', function( event ) { @@ -54,12 +35,11 @@ } /** - * @summary Retrieves the height of the toolbar based on the container the - * editor is placed in. + * @summary Returns the height of the editor toolbar(s) in px. * * @since 3.9.0 * - * @param {Object} editor The tinyMCE editor. + * @param {Object} editor The TinyMCE editor. * @returns {number} If the height is between 10 and 200 return the height, * else return 30. */ @@ -75,17 +55,14 @@ } /** - * @summary Switches the editor between visual and text. + * @summary Switches the editor between Visual and Text mode. * - * @since 4.3.0 + * @since 2.5.0 * * @memberof switchEditors * - * @param {string} id The id of the editor you want to change the editor mode for. - * If no id is given, it defaults to content. - * @param {string} mode The mode you want to switch to. - * If an undefined mode is given, it defaults to toggle. - * + * @param {string} id The id of the editor you want to change the editor mode for. Default: `content`. + * @param {string} mode The mode you want to switch to. Default: `toggle`. * @returns {void} */ function switchEditor( id, mode ) { @@ -98,7 +75,6 @@ $textarea = $$( '#' + id ), textarea = $textarea[0]; - // Toggle the mode between visual and textual representation. if ( 'toggle' === mode ) { if ( editor && ! editor.isHidden() ) { mode = 'html'; @@ -107,20 +83,13 @@ } } - - // If the mode is tmce or tinymce, show the editor. if ( 'tmce' === mode || 'tinymce' === mode ) { - - /* - * If the editor isn't hidden we are already in tmce mode - * and we don't need to switch. - * Return false to stop event bubbling. - */ + // If the editor is visible we are already in `tinymce` mode. if ( editor && ! editor.isHidden() ) { return false; } - // Close the QuickTags toolbars if they are visible. + // Insert closing tags for any open tags in QuickTags. if ( typeof( window.QTags ) !== 'undefined' ) { window.QTags.closeAllTags( id ); } @@ -130,12 +99,12 @@ if ( editor ) { editor.show(); - // Don't resize the iframe in iOS. + // No point to resize the iframe in iOS. if ( ! tinymce.Env.iOS && editorHeight ) { toolbarHeight = getToolbarHeight( editor ); editorHeight = editorHeight - toolbarHeight + 14; - // Height must be between 50 and 5000. + // Sane limit for the editor height. if ( editorHeight > 50 && editorHeight < 5000 ) { editor.theme.resizeTo( null, editorHeight ); } @@ -148,21 +117,14 @@ $textarea.attr( 'aria-hidden', true ); window.setUserSetting( 'editor', 'tinymce' ); - // Hide the editor if mode is html. } else if ( 'html' === mode ) { - - /* - * If the editor is hidden we are already in html mode and - * we don't need to switch. - * Return false to stop event bubbling. - */ + // If the editor is hidden (Quicktags is shown) we don't need to switch. if ( editor && editor.isHidden() ) { return false; } if ( editor ) { - - // Don't resize the iframe in iOS. + // Don't resize the textarea in iOS. The iframe is forced to 100% height there, we shouldn't match it. if ( ! tinymce.Env.iOS ) { iframe = editor.iframeElement; editorHeight = iframe ? parseInt( iframe.style.height, 10 ) : 0; @@ -171,7 +133,7 @@ toolbarHeight = getToolbarHeight( editor ); editorHeight = editorHeight + toolbarHeight - 14; - // Height must be between 50 and 5000. + // Sane limit for the textarea height. if ( editorHeight > 50 && editorHeight < 5000 ) { textarea.style.height = editorHeight + 'px'; } @@ -180,7 +142,7 @@ editor.hide(); } else { - // The TinyMCE instance doesn't exist, show the textarea. + // There is probably a JS error on the page. The TinyMCE editor instance doesn't exist. Show the textarea. $textarea.css({ 'display': '', 'visibility': '' }); } @@ -191,20 +153,18 @@ } /** - * @summary Replaces all paragraphs with double line breaks. + * @summary Replaces
tags with two line breaks. "Opposite" of wpautop(). * - * Replaces all paragraphs with double line breaks. Taking into account - * the elements where the
should be preserved. - * Unifies all whitespaces. - * Adds indenting with tabs to li, dt and dd elements. - * Trims whitespaces from beginning and end of the html input. + * Replaces
tags with two line breaks except where the
has attributes. + * Unifies whitespace. + * Indents