diff --git a/src/wp-admin/js/editor.js b/src/wp-admin/js/editor.js index e3fbaab945..002cf4a11f 100644 --- a/src/wp-admin/js/editor.js +++ b/src/wp-admin/js/editor.js @@ -1,14 +1,45 @@ ( function( $ ) { + /** + * @summary Creates the tinyMCE editors. + * + * Creates the tinyMCE editor and binds all events used for switching + * from visual to text mode. + * + * @since 4.3.0 + * + * @class + */ 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. + * + * @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 ) { var id, mode, target = $$( event.target ); @@ -22,6 +53,16 @@ } } + /** + * @summary Retrieves the height of the toolbar based on the container the + * editor is placed in. + * + * @since 3.9.0 + * + * @param {Object} editor The tinyMCE editor. + * @returns {number} If the height is between 10 and 200 return the height, + * else return 30. + */ function getToolbarHeight( editor ) { var node = $$( '.mce-toolbar-grp', editor.getContainer() )[0], height = node && node.clientHeight; @@ -33,6 +74,20 @@ return 30; } + /** + * @summary Switches the editor between visual and text. + * + * @since 4.3.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. + * + * @returns {void} + */ function switchEditor( id, mode ) { id = id || 'content'; mode = mode || 'toggle'; @@ -43,6 +98,7 @@ $textarea = $$( '#' + id ), textarea = $textarea[0]; + // Toggle the mode between visual and textual representation. if ( 'toggle' === mode ) { if ( editor && ! editor.isHidden() ) { mode = 'html'; @@ -51,11 +107,20 @@ } } + + // 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 ( editor && ! editor.isHidden() ) { return false; } + // Close the QuickTags toolbars if they are visible. if ( typeof( window.QTags ) !== 'undefined' ) { window.QTags.closeAllTags( id ); } @@ -65,12 +130,12 @@ if ( editor ) { editor.show(); - // No point resizing the iframe in iOS + // Don't resize the iframe in iOS. if ( ! tinymce.Env.iOS && editorHeight ) { toolbarHeight = getToolbarHeight( editor ); editorHeight = editorHeight - toolbarHeight + 14; - // height cannot be under 50 or over 5000 + // Height must be between 50 and 5000. if ( editorHeight > 50 && editorHeight < 5000 ) { editor.theme.resizeTo( null, editorHeight ); } @@ -83,12 +148,21 @@ $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 ( editor && editor.isHidden() ) { return false; } if ( editor ) { + + // Don't resize the iframe in iOS. if ( ! tinymce.Env.iOS ) { iframe = editor.iframeElement; editorHeight = iframe ? parseInt( iframe.style.height, 10 ) : 0; @@ -97,7 +171,7 @@ toolbarHeight = getToolbarHeight( editor ); editorHeight = editorHeight + toolbarHeight - 14; - // height cannot be under 50 or over 5000 + // Height must be between 50 and 5000. if ( editorHeight > 50 && editorHeight < 5000 ) { textarea.style.height = editorHeight + 'px'; } @@ -106,7 +180,7 @@ editor.hide(); } else { - // The TinyMCE instance doesn't exist, show the textarea + // The TinyMCE instance doesn't exist, show the textarea. $textarea.css({ 'display': '', 'visibility': '' }); } @@ -116,7 +190,22 @@ } } - // Replace paragraphs with double line breaks + /** + * @summary Replaces all paragraphs with double line breaks. + * + * 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.
+ *
+ * @since 4.3.0
+ *
+ * @memberof switchEditors
+ *
+ * @param {string} html The content from the editor.
+ * @return {string} The formatted html string.
+ */
function removep( html ) {
var blocklist = 'blockquote|ul|ol|li|dl|dt|dd|table|thead|tbody|tfoot|tr|th|td|h[1-6]|fieldset',
blocklist1 = blocklist + '|div|p',
@@ -129,7 +218,10 @@
return '';
}
- // Preserve script and style tags.
+ /*
+ * Protect script and style tags by replacing them with