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: http://core.svn.wordpress.org/trunk@22007 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Andrew Ozz 2012-09-26 03:30:21 +00:00
parent 1009245fa1
commit 563c7caac5
7 changed files with 169 additions and 27 deletions

View File

@ -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;

View File

@ -347,7 +347,7 @@ if ( post_type_supports($post_type, 'editor') ) {
?>
<div id="postdivrich" class="postarea">
<?php wp_editor($post->post_content, 'content', array('dfw' => true, 'tabfocus_elements' => 'sample-permalink,post-preview') ); ?>
<?php wp_editor($post->post_content, 'content', array('dfw' => true, 'tabfocus_elements' => 'sample-permalink,post-preview', 'editor_height' => 360) ); ?>
<table id="post-status-info" cellspacing="0"><tbody><tr>
<td id="wp-word-count"><?php printf( __( 'Word count: %s' ), '<span class="word-count">0</span>' ); ?></td>

View File

@ -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');

View File

@ -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 = $('<div id="content-resize-handle"><br></div>');
$('#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');
});
});
});
});
});

View File

@ -288,7 +288,7 @@ if ( !empty($_REQUEST['ajax']) ) {
return false;
}
jQuery('#extra-fields').html('<div class="postbox"><h2><?php _e( 'Add Photos' ); ?> <small id="photo_directions">(<?php _e("click images to select") ?>)</small></h2><ul class="actions"><li><a href="#" id="photo-add-url" class="button"><?php _e("Add from URL") ?> +</a></li></ul><div class="inside"><div class="titlewrap"><div id="img_container"></div></div><p id="options"><a href="#" class="close button"><?php _e('Cancel'); ?></a><a href="#" class="refresh button"><?php _e('Refresh'); ?></a></p></div>');
jQuery('#extra-fields').html('<div class="postbox"><h2><?php _e( 'Add Photos' ); ?> <small id="photo_directions">(<?php _e("click images to select") ?>)</small></h2><ul class="actions"><li><a href="#" id="photo-add-url" class="button button-small"><?php _e("Add from URL") ?> +</a></li></ul><div class="inside"><div class="titlewrap"><div id="img_container"></div></div><p id="options"><a href="#" class="close button"><?php _e('Cancel'); ?></a><a href="#" class="refresh button"><?php _e('Refresh'); ?></a></p></div>');
jQuery('#img_container').html(strtoappend);
<?php break;
}

View File

@ -32,7 +32,7 @@ final class _WP_Editors {
'wpautop' => 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 <style> tags, can use "scoped".
@ -52,6 +52,26 @@ final class _WP_Editors {
if ( self::$this_quicktags )
self::$has_quicktags = true;
if ( empty( $set['editor_height'] ) )
return $set;
if ( 'content' === $editor_id ) {
// A cookie (set when a user resizes the editor) overrides the height.
$cookie = (int) get_user_setting( 'ed_size' );
// Upgrade an old TinyMCE cookie if it is still around, and the new one isn't.
if ( ! $cookie && isset( $_COOKIE['TinyMCE_content_size'] ) ) {
parse_str( $_COOKIE['TinyMCE_content_size'], $cookie );
$cookie = $cookie['ch'];
}
if ( $cookie )
$set['editor_height'] = $cookie;
}
if ( $set['editor_height'] < 50 )
$set['editor_height'] = 50;
return $set;
}
@ -67,10 +87,14 @@ final class _WP_Editors {
$set = self::parse_settings($editor_id, $settings);
$editor_class = ' class="' . trim( $set['editor_class'] . ' wp-editor-area' ) . '"';
$tabindex = $set['tabindex'] ? ' tabindex="' . (int) $set['tabindex'] . '"' : '';
$rows = ' rows="' . (int) $set['textarea_rows'] . '"';
$switch_class = 'html-active';
$toolbar = $buttons = '';
if ( ! empty( $set['editor_height'] ) )
$height = ' style="height: ' . $set['editor_height'] . 'px"';
else
$height = ' rows="' . $set['textarea_rows'] . '"';
if ( !current_user_can( 'upload_files' ) )
$set['media_buttons'] = false;
@ -116,7 +140,7 @@ final class _WP_Editors {
echo "</div>\n";
}
$the_editor = apply_filters('the_editor', '<div id="wp-' . $editor_id . '-editor-container" class="wp-editor-container"><textarea' . $editor_class . $rows . $tabindex . ' cols="40" name="' . $set['textarea_name'] . '" id="' . $editor_id . '">%s</textarea></div>');
$the_editor = apply_filters('the_editor', '<div id="wp-' . $editor_id . '-editor-container" class="wp-editor-container"><textarea' . $editor_class . $height . $tabindex . ' cols="40" name="' . $set['textarea_name'] . '" id="' . $editor_id . '">%s</textarea></div>');
$content = apply_filters('the_editor_content', $content);
printf($the_editor, $content);
@ -403,6 +427,9 @@ final class _WP_Editors {
'body_class' => $body_class
);
// The main editor doesn't use the TinyMCE resizing cookie.
$mceInit['theme_advanced_resizing_use_cookie'] = 'content' !== $editor_id || empty( $set['editor_height'] );
if ( $first_run )
$mceInit = array_merge(self::$first_init, $mceInit);
@ -550,15 +577,25 @@ final class _WP_Editors {
else
echo "<script type='text/javascript' src='{$baseurl}/langs/wp-langs-en.js?$version'></script>\n";
}
$mce = ( self::$has_tinymce && wp_default_editor() == 'tinymce' ) || ! self::$has_quicktags;
?>
<script type="text/javascript">
var wpActiveEditor;
(function(){
var init, ed, qt, first_init, mce = <?php echo wp_default_editor() == 'tinymce' ? 'true' : 'false'; ?>;
var init, ed, qt, first_init, DOM, el, i, mce = <?php echo (int) $mce; ?>;
if ( typeof(tinymce) == 'object' ) {
DOM = tinymce.DOM;
// mark wp_theme/ui.css as loaded
tinymce.DOM.files[tinymce.baseURI.getURI() + '/themes/advanced/skins/wp_theme/ui.css'] = true;
DOM.files[tinymce.baseURI.getURI() + '/themes/advanced/skins/wp_theme/ui.css'] = true;
DOM.events.add( DOM.select('.wp-editor-wrap'), 'mousedown', function(e){
if ( this.id )
wpActiveEditor = this.id.slice(3, -5);
});
for ( ed in tinyMCEPreInit.mceInit ) {
if ( first_init ) {
@ -570,6 +607,12 @@ final class _WP_Editors {
if ( mce )
try { tinymce.init(init); } catch(e){}
}
} else {
el = document.getElementsByClassName('wp-editor-wrap');
for ( i in el ) {
if ( typeof(el[i]) == 'object' )
el[i].onmousedown = function(){ wpActiveEditor = this.id.slice(3, -5); }
}
}
if ( typeof(QTags) == 'function' ) {
@ -578,29 +621,23 @@ final class _WP_Editors {
}
}
})();
var wpActiveEditor;
jQuery('.wp-editor-wrap').mousedown(function(e){
wpActiveEditor = this.id.slice(3, -5);
});
<?php
<?php
if ( self::$ext_plugins )
echo self::$ext_plugins . "\n";
if ( ! $compressed && $tmce_on ) {
?>
(function(){var t=tinyMCEPreInit,sl=tinymce.ScriptLoader,ln=t.ref.language,th=t.ref.theme,pl=t.ref.plugins;sl.markDone(t.base+'/langs/'+ln+'.js');sl.markDone(t.base+'/themes/'+th+'/langs/'+ln+'.js');sl.markDone(t.base+'/themes/'+th+'/langs/'+ln+'_dlg.js');sl.markDone(t.base+'/themes/advanced/skins/wp_theme/ui.css');tinymce.each(pl.split(','),function(n){if(n&&n.charAt(0)!='-'){sl.markDone(t.base+'/plugins/'+n+'/langs/'+ln+'.js');sl.markDone(t.base+'/plugins/'+n+'/langs/'+ln+'_dlg.js');}});})();
<?php
?>
(function(){var t=tinyMCEPreInit,sl=tinymce.ScriptLoader,ln=t.ref.language,th=t.ref.theme,pl=t.ref.plugins;sl.markDone(t.base+'/langs/'+ln+'.js');sl.markDone(t.base+'/themes/'+th+'/langs/'+ln+'.js');sl.markDone(t.base+'/themes/'+th+'/langs/'+ln+'_dlg.js');sl.markDone(t.base+'/themes/advanced/skins/wp_theme/ui.css');tinymce.each(pl.split(','),function(n){if(n&&n.charAt(0)!='-'){sl.markDone(t.base+'/plugins/'+n+'/langs/'+ln+'.js');sl.markDone(t.base+'/plugins/'+n+'/langs/'+ln+'_dlg.js');}});})();
<?php
}
if ( !is_admin() )
echo 'var ajaxurl = "' . admin_url( 'admin-ajax.php', 'relative' ) . '";';
?>
</script>
<?php
?>
</script>
<?php
if ( in_array('wplink', self::$plugins, true) || in_array('link', self::$qt_buttons, true) )
self::wp_link_dialog();

View File

@ -1018,12 +1018,18 @@
}
/* WP specific */
.wp-editor-wrap {
position: relative;
}
.wp-editor-area {
font-family: Consolas, Monaco, monospace;
padding: 10px;
margin: 1px 0 0;
line-height: 150%;
border: 0 none;
outline: none;
display: block;
resize: vertical;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;