From 5ad7fe8cd670c449ee2c4666307fcdd51b1c588d Mon Sep 17 00:00:00 2001 From: Andrew Ozz Date: Wed, 26 Sep 2012 03:30:21 +0000 Subject: [PATCH] Main editor: maintain the height when switching Visual to Text and back, save the height when resizing as user state, output the height in the textarea tag when loading, (thanks @nacin for the help), fixes #21718 git-svn-id: https://develop.svn.wordpress.org/trunk@22007 602fd350-edb4-49c9-b593-d223f7449a82 --- wp-admin/css/wp-admin.css | 28 ++++++++++-- wp-admin/edit-form-advanced.php | 2 +- wp-admin/js/editor.js | 4 +- wp-admin/js/post.js | 79 +++++++++++++++++++++++++++++++++ wp-admin/press-this.php | 2 +- wp-includes/class-wp-editor.php | 75 +++++++++++++++++++++++-------- wp-includes/css/editor.css | 6 +++ 7 files changed, 169 insertions(+), 27 deletions(-) diff --git a/wp-admin/css/wp-admin.css b/wp-admin/css/wp-admin.css index 1960648464..b3d73fcce7 100644 --- a/wp-admin/css/wp-admin.css +++ b/wp-admin/css/wp-admin.css @@ -3107,7 +3107,7 @@ td.plugin-title p { background: transparent url(../images/resize.gif) no-repeat scroll right bottom; width: 12px; cursor: se-resize; - margin: 0 2px; + margin: 0 1px; position: relative; top: -2px; } @@ -3116,6 +3116,23 @@ td.plugin-title p { top: 20px; } +#content-resize-handle { + background: transparent url(../images/resize.gif) no-repeat scroll right bottom; + width: 12px; + cursor: se-resize; + position: absolute; + right: 2px; + height: 19px; +} + +.press-this #content-resize-handle { + bottom: 2px; +} + +.tmce-active #content-resize-handle { + display: none; +} + #wp-word-count { display: block; padding: 2px 10px; @@ -4309,6 +4326,10 @@ span.imgedit-scale-warn { box-shadow: none; } +.comment-php .wp-editor-area { + height: 200px; +} + .comment-ays { margin-bottom: 0; border-style: solid; @@ -7320,6 +7341,7 @@ img { /* Editor/Main Column */ .press-this #poststuff { margin: 0 10px 10px; + padding: 0; } #poststuff #editor-toolbar { @@ -7415,7 +7437,7 @@ h3.tb { } .press-this #extra-fields .actions { - margin: -25px -7px 0 0; + margin: -32px -7px 0 0; } .press-this .actions li { @@ -7515,7 +7537,7 @@ h3.tb { margin: 5px 0; padding: 0 5px; border: 0 none; - height: 357px; + height: 345px; font-family: Consolas, Monaco, monospace; font-size: 13px; line-height: 19px; diff --git a/wp-admin/edit-form-advanced.php b/wp-admin/edit-form-advanced.php index 354245007b..ad831555a1 100644 --- a/wp-admin/edit-form-advanced.php +++ b/wp-admin/edit-form-advanced.php @@ -347,7 +347,7 @@ if ( post_type_supports($post_type, 'editor') ) { ?>
-post_content, 'content', array('dfw' => true, 'tabfocus_elements' => 'sample-permalink,post-preview') ); ?> +post_content, 'content', array('dfw' => true, 'tabfocus_elements' => 'sample-permalink,post-preview', 'editor_height' => 360) ); ?> diff --git a/wp-admin/js/editor.js b/wp-admin/js/editor.js index c670cb13a8..675ffd94b0 100644 --- a/wp-admin/js/editor.js +++ b/wp-admin/js/editor.js @@ -49,10 +49,8 @@ var switchEditors = { if ( ed && ed.isHidden() ) return false; - if ( ed ) { - txtarea_el.style.height = ed.getContentAreaContainer().offsetHeight + 20 + 'px'; + if ( ed ) ed.hide(); - } dom.removeClass(wrap_id, 'tmce-active'); dom.addClass(wrap_id, 'html-active'); diff --git a/wp-admin/js/post.js b/wp-admin/js/post.js index 459054e5a9..a07ff424ee 100644 --- a/wp-admin/js/post.js +++ b/wp-admin/js/post.js @@ -667,4 +667,83 @@ jQuery(document).ready( function($) { } wptitlehint(); + + // resizable textarea#content + (function() { + var textarea = $('textarea#content'), offset = null, el; + + function dragging(e) { + textarea.height( Math.max(50, offset + e.pageY) + 'px' ); + return false; + } + + function endDrag(e) { + var height = $('#wp-content-editor-container').height(); + + textarea.focus(); + $(document).unbind('mousemove', dragging).unbind('mouseup', endDrag); + + if ( height > 83 ) { + height -= 33; // compensate for toolbars, padding... + setUserSetting( 'ed_size', height ); + } + } + + textarea.css('resize', 'none'); + el = $('

'); + $('#wp-content-wrap').append(el); + el.on('mousedown', function(e) { + offset = textarea.height() - e.pageY; + textarea.blur(); + $(document).mousemove(dragging).mouseup(endDrag); + return false; + }); + })(); + + tinymce.onAddEditor.add(function(mce, ed){ + if ( ed.id != 'content' ) + return; + + // resize TinyMCE to match the textarea height when switching Text -> Visual + ed.onLoadContent.add( function(ed, o) { + var ifr_height, height = parseInt( $('#content').css('height'), 10 ), + tb_height = $('#content_tbl tr.mceFirst').height(); + + if ( height && !isNaN(height) && tb_height ) { + ifr_height = (height - tb_height) + 12; // compensate for padding in the textarea + + $('#content_tbl').css('height', '' ); + $('#content_ifr').css('height', ifr_height + 'px' ); + setUserSetting( 'ed_size', height ); + } + }); + + // resize the textarea to match TinyMCE's height when switching Visual -> Text + ed.onSaveContent.add( function(ed, o) { + var height = $('#content_tbl').height(); + + if ( height && height > 83 ) { + height -= 33; + + $('#content').css( 'height', height + 'px' ); + setUserSetting( 'ed_size', height ); + } + }); + + // save on resizing TinyMCE + ed.onPostRender.add(function() { + $('#content_resize').on('mousedown.wp-mce-resize', function(e){ + $(document).on('mouseup.wp-mce-resize', function(e){ + var height = $('#wp-content-editor-container').height(); + + height -= 33; + if ( height > 50 && height != getUserSetting( 'ed_size' ) ) + setUserSetting( 'ed_size', height ); + + $(document).off('mouseup.wp-mce-resize'); + }); + }); + }); + }); + }); diff --git a/wp-admin/press-this.php b/wp-admin/press-this.php index badd2c592c..cd6d02fb2b 100644 --- a/wp-admin/press-this.php +++ b/wp-admin/press-this.php @@ -288,7 +288,7 @@ if ( !empty($_REQUEST['ajax']) ) { return false; } - jQuery('#extra-fields').html('

()

'); + jQuery('#extra-fields').html('

()

'); jQuery('#img_container').html(strtoappend); true, // use wpautop? 'media_buttons' => true, // show insert/upload button(s) 'textarea_name' => $editor_id, // set the textarea name to something different, square brackets [] can be used here - 'textarea_rows' => get_option('default_post_edit_rows', 10), // rows="..." + 'textarea_rows' => 20, 'tabindex' => '', 'tabfocus_elements' => ':prev,:next', // the previous and next element ID to move the focus to when pressing the Tab key in TinyMCE 'editor_css' => '', // intended for extra styles for both visual and Text editors buttons, needs to include the
0' ); ?>