WordPress.org

Make WordPress Core

Changeset 22007


Ignore:
Timestamp:
09/26/2012 03:30:21 AM (9 years ago)
Author:
azaozz
Message:

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

Location:
trunk
Files:
7 edited

Legend:

Unmodified
Added
Removed

  • trunk/wp-admin/css/wp-admin.css

    r21987 r22007  
    31083108    width: 12px;
    31093109    cursor: se-resize;
    3110     margin: 0 2px;
     3110    margin: 0 1px;
    31113111    position: relative;
    31123112    top: -2px;
    … …  
    31153115#post-body .postarea .wp_themeSkin .mceStatusbar a.mceResize {
    31163116    top: 20px;
     3117}
     3118
     3119#content-resize-handle {
     3120    background: transparent url(../images/resize.gif) no-repeat scroll right bottom;
     3121    width: 12px;
     3122    cursor: se-resize;
     3123    position: absolute;
     3124    right: 2px;
     3125    height: 19px;
     3126}
     3127
     3128.press-this #content-resize-handle {
     3129    bottom: 2px;
     3130}
     3131
     3132.tmce-active #content-resize-handle {
     3133    display: none;
    31173134}
    31183135
    … …  
    43084325    -webkit-box-shadow: none;
    43094326    box-shadow: none;
     4327}
     4328
     4329.comment-php .wp-editor-area {
     4330    height: 200px;
    43104331}
    43114332
    … …  
    73217342.press-this #poststuff {
    73227343    margin: 0 10px 10px;
     7344    padding: 0;
    73237345}
    73247346
    … …  
    74167438
    74177439.press-this #extra-fields .actions {
    7418     margin: -25px -7px 0 0;
     7440    margin: -32px -7px 0 0;
    74197441}
    74207442
    … …  
    75167538    padding: 0 5px;
    75177539    border: 0 none;
    7518     height: 357px;
     7540    height: 345px;
    75197541    font-family: Consolas, Monaco, monospace;
    75207542    font-size: 13px;

  • trunk/wp-admin/edit-form-advanced.php

    r21968 r22007  
    348348<div id="postdivrich" class="postarea">
    349349
    350 <?php wp_editor($post->post_content, 'content', array('dfw' => true, 'tabfocus_elements' => 'sample-permalink,post-preview') ); ?>
     350<?php wp_editor($post->post_content, 'content', array('dfw' => true, 'tabfocus_elements' => 'sample-permalink,post-preview', 'editor_height' => 360) ); ?>
    351351
    352352<table id="post-status-info" cellspacing="0"><tbody><tr>

  • trunk/wp-admin/js/editor.js

    r21888 r22007  
    5050                return false;
    5151
    52             if ( ed ) {
    53                 txtarea_el.style.height = ed.getContentAreaContainer().offsetHeight + 20 + 'px';
     52            if ( ed )
    5453                ed.hide();
    55             }
    5654
    5755            dom.removeClass(wrap_id, 'tmce-active');

  • trunk/wp-admin/js/post.js

    r21970 r22007  
    668668
    669669    wptitlehint();
     670
     671    // resizable textarea#content
     672    (function() {
     673        var textarea = $('textarea#content'), offset = null, el;
     674
     675        function dragging(e) {
     676            textarea.height( Math.max(50, offset + e.pageY) + 'px' );
     677            return false;
     678        }
     679
     680        function endDrag(e) {
     681            var height = $('#wp-content-editor-container').height();
     682
     683            textarea.focus();
     684            $(document).unbind('mousemove', dragging).unbind('mouseup', endDrag);
     685
     686            if ( height > 83 ) {
     687                height -= 33; // compensate for toolbars, padding...
     688                setUserSetting( 'ed_size', height );
     689            }
     690        }
     691
     692        textarea.css('resize', 'none');
     693        el = $('<div id="content-resize-handle"><br></div>');
     694        $('#wp-content-wrap').append(el);
     695        el.on('mousedown', function(e) {
     696            offset = textarea.height() - e.pageY;
     697            textarea.blur();
     698            $(document).mousemove(dragging).mouseup(endDrag);
     699            return false;
     700        });
     701    })();
     702
     703    tinymce.onAddEditor.add(function(mce, ed){
     704        if ( ed.id != 'content' )
     705            return;
     706
     707        // resize TinyMCE to match the textarea height when switching Text -> Visual
     708        ed.onLoadContent.add( function(ed, o) {
     709            var ifr_height, height = parseInt( $('#content').css('height'), 10 ),
     710                tb_height = $('#content_tbl tr.mceFirst').height();
     711
     712            if ( height && !isNaN(height) && tb_height ) {
     713                ifr_height = (height - tb_height) + 12; // compensate for padding in the textarea
     714
     715                $('#content_tbl').css('height', '' );
     716                $('#content_ifr').css('height', ifr_height + 'px' );
     717                setUserSetting( 'ed_size', height );
     718            }
     719        });
     720
     721        // resize the textarea to match TinyMCE's height when switching Visual -> Text
     722        ed.onSaveContent.add( function(ed, o) {
     723            var height = $('#content_tbl').height();
     724
     725            if ( height && height > 83 ) {
     726                height -= 33;
     727
     728                $('#content').css( 'height', height + 'px' );
     729                setUserSetting( 'ed_size', height );
     730            }
     731        });
     732
     733        // save on resizing TinyMCE
     734        ed.onPostRender.add(function() {
     735            $('#content_resize').on('mousedown.wp-mce-resize', function(e){
     736                $(document).on('mouseup.wp-mce-resize', function(e){
     737                    var height = $('#wp-content-editor-container').height();
     738
     739                    height -= 33;
     740                    if ( height > 50 && height != getUserSetting( 'ed_size' ) )
     741                        setUserSetting( 'ed_size', height );
     742
     743                    $(document).off('mouseup.wp-mce-resize');
     744                });
     745            });
     746        });
     747    });
     748
    670749});

  • trunk/wp-admin/press-this.php

    r21311 r22007  
    289289        }
    290290
    291         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>');
     291        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>');
    292292        jQuery('#img_container').html(strtoappend);
    293293        <?php break;

  • trunk/wp-includes/class-wp-editor.php

    r21961 r22007  
    3333            'media_buttons' => true, // show insert/upload button(s)
    3434            'textarea_name' => $editor_id, // set the textarea name to something different, square brackets [] can be used here
    35             'textarea_rows' => get_option('default_post_edit_rows', 10), // rows="..."
     35            'textarea_rows' => 20,
    3636            'tabindex' => '',
    3737            'tabfocus_elements' => ':prev,:next', // the previous and next element ID to move the focus to when pressing the Tab key in TinyMCE
    … …  
    5353            self::$has_quicktags = true;
    5454
     55        if ( empty( $set['editor_height'] ) )
     56            return $set;
     57
     58        if ( 'content' === $editor_id ) {
     59            // A cookie (set when a user resizes the editor) overrides the height.
     60            $cookie = (int) get_user_setting( 'ed_size' );
     61
     62            // Upgrade an old TinyMCE cookie if it is still around, and the new one isn't.
     63            if ( ! $cookie && isset( $_COOKIE['TinyMCE_content_size'] ) ) {
     64                parse_str( $_COOKIE['TinyMCE_content_size'], $cookie );
     65                $cookie = $cookie['ch'];
     66            }
     67
     68            if ( $cookie )
     69                $set['editor_height'] = $cookie;
     70        }
     71
     72        if ( $set['editor_height'] < 50 )
     73            $set['editor_height'] = 50;
     74
    5575        return $set;
    5676    }
    … …  
    6888        $editor_class = ' class="' . trim( $set['editor_class'] . ' wp-editor-area' ) . '"';
    6989        $tabindex = $set['tabindex'] ? ' tabindex="' . (int) $set['tabindex'] . '"' : '';
    70         $rows = ' rows="' . (int) $set['textarea_rows'] . '"';
    7190        $switch_class = 'html-active';
    7291        $toolbar = $buttons = '';
     92
     93        if ( ! empty( $set['editor_height'] ) )
     94            $height = ' style="height: ' . $set['editor_height'] . 'px"';
     95        else
     96            $height = ' rows="' . $set['textarea_rows'] . '"';
    7397
    7498        if ( !current_user_can( 'upload_files' ) )
    … …  
    117141        }
    118142
    119         $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>');
     143        $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>');
    120144        $content = apply_filters('the_editor_content', $content);
    121145
    … …  
    404428            );
    405429
     430            // The main editor doesn't use the TinyMCE resizing cookie.
     431            $mceInit['theme_advanced_resizing_use_cookie'] = 'content' !== $editor_id || empty( $set['editor_height'] );
     432
    406433            if ( $first_run )
    407434                $mceInit = array_merge(self::$first_init, $mceInit);
    … …  
    551578                echo "<script type='text/javascript' src='{$baseurl}/langs/wp-langs-en.js?$version'></script>\n";
    552579        }
     580
     581        $mce = ( self::$has_tinymce && wp_default_editor() == 'tinymce' ) || ! self::$has_quicktags;
    553582?>
    554583
    555584    <script type="text/javascript">
     585        var wpActiveEditor;
     586
    556587        (function(){
    557             var init, ed, qt, first_init, mce = <?php echo wp_default_editor() == 'tinymce' ? 'true' : 'false'; ?>;
     588            var init, ed, qt, first_init, DOM, el, i, mce = <?php echo (int) $mce; ?>;
    558589
    559590            if ( typeof(tinymce) == 'object' ) {
     591                DOM = tinymce.DOM;
    560592                // mark wp_theme/ui.css as loaded
    561                 tinymce.DOM.files[tinymce.baseURI.getURI() + '/themes/advanced/skins/wp_theme/ui.css'] = true;
     593                DOM.files[tinymce.baseURI.getURI() + '/themes/advanced/skins/wp_theme/ui.css'] = true;
     594
     595                DOM.events.add( DOM.select('.wp-editor-wrap'), 'mousedown', function(e){
     596                    if ( this.id )
     597                        wpActiveEditor = this.id.slice(3, -5);
     598                });
    562599
    563600                for ( ed in tinyMCEPreInit.mceInit ) {
    … …  
    571608                        try { tinymce.init(init); } catch(e){}
    572609                }
     610            } else {
     611                el = document.getElementsByClassName('wp-editor-wrap');
     612                for ( i in el ) {
     613                    if ( typeof(el[i]) == 'object' )
     614                        el[i].onmousedown = function(){ wpActiveEditor = this.id.slice(3, -5); }
     615                }
    573616            }
    574617
    … …  
    579622            }
    580623        })();
    581 
    582         var wpActiveEditor;
    583 
    584         jQuery('.wp-editor-wrap').mousedown(function(e){
    585             wpActiveEditor = this.id.slice(3, -5);
    586         });
    587 
    588 <?php
     624        <?php
    589625
    590626        if ( self::$ext_plugins )
    … …  
    592628
    593629        if ( ! $compressed && $tmce_on ) {
    594 ?>
    595         (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');}});})();
    596 <?php
     630            ?>
     631            (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');}});})();
     632            <?php
    597633        }
    598634
    599635        if ( !is_admin() )
    600636            echo 'var ajaxurl = "' . admin_url( 'admin-ajax.php', 'relative' ) . '";';
    601 ?>
    602     </script>
    603 <?php
     637
     638        ?>
     639        </script>
     640        <?php
    604641
    605642        if ( in_array('wplink', self::$plugins, true) || in_array('link', self::$qt_buttons, true) )

  • trunk/wp-includes/css/editor.css

    r21661 r22007  
    10191019
    10201020/* WP specific */
     1021.wp-editor-wrap {
     1022    position: relative;
     1023}
     1024
    10211025.wp-editor-area {
    10221026    font-family: Consolas, Monaco, monospace;
    10231027    padding: 10px;
     1028    margin: 1px 0 0;
    10241029    line-height: 150%;
    10251030    border: 0 none;
    10261031    outline: none;
     1032    display: block;
    10271033    resize: vertical;
    10281034    -moz-box-sizing: border-box;
Note: See TracChangeset for help on using the changeset viewer.