WordPress.org
Get WordPress

Make WordPress Core


Ignore:
Timestamp:
06/21/2015 10:00:42 PM (11 years ago)
Author:
azaozz
Message:

Update the TinyMCE initialization:

  • Replace wp_htmledit_pre() and wp_richedit_pre() with format_for_editor().
  • Replace the 'htmledit_pre' and 'richedit_pre' filters with 'format_for_editor'.
  • Do not run the post content through wpautop() in PHP when the visual editor is default. Run the textarea content through the JS wpautop on initializing TinyMCE.
  • Simplify both editors initialization.
  • Improve setting of wpActiveEditor in Quicktags.
  • Improve editor.js, use tinymce.$ when possible.

See #32425.

File:
1 edited

Legend:

Unmodified
Added
Removed

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

    r32699 r32899  
    144144     */
    145145    public static function editor( $content, $editor_id, $settings = array() ) {
    146 
    147146        $set = self::parse_settings( $editor_id, $settings );
    148         $editor_class = ' class="' . trim( $set['editor_class'] . ' wp-editor-area' ) . '"';
     147        $editor_class = ' class="' . trim( esc_attr( $set['editor_class'] ) . ' wp-editor-area' ) . '"';
    149148        $tabindex = $set['tabindex'] ? ' tabindex="' . (int) $set['tabindex'] . '"' : '';
    150         $switch_class = 'html-active';
     149        $default_editor = 'html';
    151150        $toolbar = $buttons = $autocomplete = '';
     151        $editor_id_attr = esc_attr( $editor_id );
    152152
    153153        if ( $set['drag_drop_upload'] ) {
    … …  
    155155        }
    156156
    157         if ( ! empty( $set['editor_height'] ) )
    158             $height = ' style="height: ' . $set['editor_height'] . 'px"';
    159         else
    160             $height = ' rows="' . $set['textarea_rows'] . '"';
    161 
    162         if ( !current_user_can( 'upload_files' ) )
     157        if ( ! empty( $set['editor_height'] ) ) {
     158            $height = ' style="height: ' . (int) $set['editor_height'] . 'px"';
     159        } else {
     160            $height = ' rows="' . (int) $set['textarea_rows'] . '"';
     161        }
     162
     163        if ( ! current_user_can( 'upload_files' ) ) {
    163164            $set['media_buttons'] = false;
    164 
    165         if ( ! self::$this_quicktags && self::$this_tinymce ) {
    166             $switch_class = 'tmce-active';
     165        }
     166
     167        if ( self::$this_tinymce ) {
    167168            $autocomplete = ' autocomplete="off"';
    168         } elseif ( self::$this_quicktags && self::$this_tinymce ) {
    169             $default_editor = $set['default_editor'] ? $set['default_editor'] : wp_default_editor();
    170             $autocomplete = ' autocomplete="off"';
    171 
    172             // 'html' is used for the "Text" editor tab.
    173             if ( 'html' === $default_editor ) {
    174                 add_filter('the_editor_content', 'wp_htmledit_pre');
    175                 $switch_class = 'html-active';
     169
     170            if ( self::$this_quicktags ) {
     171                $default_editor = $set['default_editor'] ? $set['default_editor'] : wp_default_editor();
     172                // 'html' is used for the "Text" editor tab.
     173                if ( 'html' !== $default_editor ) {
     174                    $default_editor = 'tinymce';
     175                }
     176
     177                $buttons .= '<button type="button" id="' . $editor_id_attr . '-tmce" class="wp-switch-editor switch-tmce"' .
     178                    ' data-wp-editor-id="' . $editor_id_attr . '">' . __('Visual') . "</button>\n";
     179                $buttons .= '<button type="button" id="' . $editor_id_attr . '-html" class="wp-switch-editor switch-html"' .
     180                    ' data-wp-editor-id="' . $editor_id_attr . '">' . _x( 'Text', 'Name for the Text editor tab (formerly HTML)' ) . "</button>\n";
    176181            } else {
    177                 add_filter('the_editor_content', 'wp_richedit_pre');
    178                 $switch_class = 'tmce-active';
    179             }
    180 
    181             $buttons .= '<button type="button" id="' . $editor_id . '-tmce" class="wp-switch-editor switch-tmce" onclick="switchEditors.switchto(this);">' . __('Visual') . "</button>\n";
    182             $buttons .= '<button type="button" id="' . $editor_id . '-html" class="wp-switch-editor switch-html" onclick="switchEditors.switchto(this);">' . _x( 'Text', 'Name for the Text editor tab (formerly HTML)' ) . "</button>\n";
    183         }
    184 
     182                $default_editor = 'tinymce';
     183            }
     184        }
     185
     186        $switch_class = 'html' === $default_editor ? 'html-active' : 'tmce-active';
    185187        $wrap_class = 'wp-core-ui wp-editor-wrap ' . $switch_class;
    186188
    … …  
    189191        }
    190192
    191         echo '<div id="wp-' . $editor_id . '-wrap" class="' . $wrap_class . '">';
     193        echo '<div id="wp-' . $editor_id_attr . '-wrap" class="' . $wrap_class . '">';
    192194
    193195        if ( self::$editor_buttons_css ) {
    194             wp_print_styles('editor-buttons');
     196            wp_print_styles( 'editor-buttons' );
    195197            self::$editor_buttons_css = false;
    196198        }
    197199
    198         if ( !empty($set['editor_css']) )
     200        if ( ! empty( $set['editor_css'] ) ) {
    199201            echo $set['editor_css'] . "\n";
    200 
    201         if ( !empty($buttons) || $set['media_buttons'] ) {
    202             echo '<div id="wp-' . $editor_id . '-editor-tools" class="wp-editor-tools hide-if-no-js">';
     202        }
     203
     204        if ( ! empty( $buttons ) || $set['media_buttons'] ) {
     205            echo '<div id="wp-' . $editor_id_attr . '-editor-tools" class="wp-editor-tools hide-if-no-js">';
    203206
    204207            if ( $set['media_buttons'] ) {
    205208                self::$has_medialib = true;
    206209
    207                 if ( !function_exists('media_buttons') )
    208                     include(ABSPATH . 'wp-admin/includes/media.php');
    209 
    210                 echo '<div id="wp-' . $editor_id . '-media-buttons" class="wp-media-buttons">';
     210                if ( ! function_exists( 'media_buttons' ) )
     211                    include( ABSPATH . 'wp-admin/includes/media.php' );
     212
     213                echo '<div id="wp-' . $editor_id_attr . '-media-buttons" class="wp-media-buttons">';
    211214
    212215                /**
    … …  
    225228        }
    226229
     230        $quicktags_toolbar = '';
     231
     232        if ( self::$this_quicktags ) {
     233            if ( 'content' === $editor_id && ! empty( $GLOBALS['current_screen'] ) && $GLOBALS['current_screen']->base === 'post' ) {
     234                $toolbar_id = 'ed_toolbar';
     235            } else {
     236                $toolbar_id = 'qt_' . $editor_id_attr . '_toolbar';
     237            }
     238
     239            $quicktags_toolbar = '<div id="' . $toolbar_id . '" class="quicktags-toolbar"></div>';
     240        }
     241
    227242        /**
    228243         * Filter the HTML markup output that displays the editor.
    … …  
    232247         * @param string $output Editor's HTML markup.
    233248         */
    234         $the_editor = apply_filters( 'the_editor', '<div id="wp-' . $editor_id . '-editor-container" class="wp-editor-container">' .
    235             '<textarea' . $editor_class . $height . $tabindex . $autocomplete . ' cols="40" name="' . $set['textarea_name'] . '" ' .
    236             'id="' . $editor_id . '">%s</textarea></div>' );
     249        $the_editor = apply_filters( 'the_editor', '<div id="wp-' . $editor_id_attr . '-editor-container" class="wp-editor-container">' .
     250            $quicktags_toolbar .
     251            '<textarea' . $editor_class . $height . $tabindex . $autocomplete . ' cols="40" name="' . esc_attr( $set['textarea_name'] ) . '" ' .
     252            'id="' . $editor_id_attr . '">%s</textarea></div>' );
    237253
    238254        /**
    … …  
    243259         * @param string $content Default editor content.
    244260         */
    245         $content = apply_filters( 'the_editor_content', $content );
     261        $content = apply_filters( 'the_editor_content', $content, $default_editor );
     262
     263        // Back-compat for the `htmledit_pre` and `richedit_pre` filters
     264        if ( 'html' === $default_editor && has_filter( 'htmledit_pre' ) ) {
     265            // TODO: needs _deprecated_filter(), use _deprecated_function() as substitute for now
     266            _deprecated_function( 'add_filter( htmledit_pre )', '4.3.0', 'add_filter( format_for_editor )' );
     267            $content = apply_filters( 'htmledit_pre', $content );
     268        } elseif ( 'tinymce' === $default_editor && has_filter( 'richedit_pre' ) ) {
     269            _deprecated_function( 'add_filter( richedit_pre )', '4.3.0', 'add_filter( format_for_editor )' );
     270            $content = apply_filters( 'richedit_pre', $content );
     271        }
    246272
    247273        printf( $the_editor, $content );
    248274        echo "\n</div>\n\n";
    249275
    250         self::editor_settings($editor_id, $set);
     276        self::editor_settings( $editor_id, $set );
    251277    }
    252278
    … …  
    479505                    'skin' => 'lightgray',
    480506                    'language' => self::$mce_locale,
    481                     'formats' => "{
    482                         alignleft: [
    483                             {selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li', styles: {textAlign:'left'}},
    484                             {selector: 'img,table,dl.wp-caption', classes: 'alignleft'}
    485                         ],
    486                         aligncenter: [
    487                             {selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li', styles: {textAlign:'center'}},
    488                             {selector: 'img,table,dl.wp-caption', classes: 'aligncenter'}
    489                         ],
    490                         alignright: [
    491                             {selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li', styles: {textAlign:'right'}},
    492                             {selector: 'img,table,dl.wp-caption', classes: 'alignright'}
    493                         ],
    494                         strikethrough: {inline: 'del'}
    495                     }",
     507                    'formats' => '{' .
     508                        'alignleft: [' .
     509                            '{selector: "p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li", styles: {textAlign:"left"}},' .
     510                            '{selector: "img,table,dl.wp-caption", classes: "alignleft"}' .
     511                        '],' .
     512                        'aligncenter: [' .
     513                            '{selector: "p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li", styles: {textAlign:"center"}},' .
     514                            '{selector: "img,table,dl.wp-caption", classes: "aligncenter"}' .
     515                        '],' .
     516                        'alignright: [' .
     517                            '{selector: "p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li", styles: {textAlign:"right"}},' .
     518                            '{selector: "img,table,dl.wp-caption", classes: "alignright"}' .
     519                        '],' .
     520                        'strikethrough: {inline: "del"}' .
     521                    '}',
    496522                    'relative_urls' => false,
    497523                    'remove_script_host' => false,
    … …  
    651677            );
    652678
    653             if ( $first_run )
    654                 $mceInit = array_merge( self::$first_init, $mceInit );
     679            // Merge with the first part of the init array
     680            $mceInit = array_merge( self::$first_init, $mceInit );
    655681
    656682            if ( is_array( $set['tinymce'] ) )
    … …  
    663689             * and "extended_valid_elements" can be done through this filter. Best
    664690             * is to use the default cleanup by not specifying valid_elements,
    665              * as TinyMCE contains full set of XHTML 1.0.
     691             * as TinyMCE checks against the full set of HTML 5.0 elements and attributes.
    666692             */
    667693            if ( $set['teeny'] ) {
    … …  
    11831209
    11841210        ( function() {
    1185             var init, edId, qtId, firstInit, wrapper;
     1211            var init, id, $wrap;
    11861212
    11871213            if ( typeof tinymce !== 'undefined' ) {
    1188                 for ( edId in tinyMCEPreInit.mceInit ) {
    1189                     if ( firstInit ) {
    1190                         init = tinyMCEPreInit.mceInit[edId] = tinymce.extend( {}, firstInit, tinyMCEPreInit.mceInit[edId] );
    1191                     } else {
    1192                         init = firstInit = tinyMCEPreInit.mceInit[edId];
    1193                     }
    1194 
    1195                     wrapper = tinymce.DOM.select( '#wp-' + edId + '-wrap' )[0];
    1196 
    1197                     if ( ( tinymce.DOM.hasClass( wrapper, 'tmce-active' ) || ! tinyMCEPreInit.qtInit.hasOwnProperty( edId ) ) &&
    1198                         ! init.wp_skip_init ) {
    1199 
    1200                         try {
    1201                             tinymce.init( init );
    1202 
    1203                             if ( ! window.wpActiveEditor ) {
    1204                                 window.wpActiveEditor = edId;
    1205                             }
    1206                         } catch(e){}
     1214                for ( id in tinyMCEPreInit.mceInit ) {
     1215                    init = tinyMCEPreInit.mceInit[id];
     1216                    $wrap = tinymce.$( '#wp-' + id + '-wrap' );
     1217
     1218                    if ( ( $wrap.hasClass( 'tmce-active' ) || ! tinyMCEPreInit.qtInit.hasOwnProperty( id ) ) && ! init.wp_skip_init ) {
     1219                        tinymce.init( init );
     1220
     1221                        if ( ! window.wpActiveEditor ) {
     1222                            window.wpActiveEditor = id;
     1223                        }
    12071224                    }
    12081225                }
    … …  
    12101227
    12111228            if ( typeof quicktags !== 'undefined' ) {
    1212                 for ( qtId in tinyMCEPreInit.qtInit ) {
    1213                     try {
    1214                         quicktags( tinyMCEPreInit.qtInit[qtId] );
    1215 
    1216                         if ( ! window.wpActiveEditor ) {
    1217                             window.wpActiveEditor = qtId;
    1218                         }
    1219                     } catch(e){};
    1220                 }
    1221             }
    1222 
    1223             if ( typeof jQuery !== 'undefined' ) {
    1224                 jQuery('.wp-editor-wrap').on( 'click.wp-editor', function() {
    1225                     if ( this.id ) {
    1226                         window.wpActiveEditor = this.id.slice( 3, -5 );
    1227                     }
    1228                 });
    1229             } else {
    1230                 for ( qtId in tinyMCEPreInit.qtInit ) {
    1231                     document.getElementById( 'wp-' + qtId + '-wrap' ).onclick = function() {
    1232                         window.wpActiveEditor = this.id.slice( 3, -5 );
     1229                for ( id in tinyMCEPreInit.qtInit ) {
     1230                    quicktags( tinyMCEPreInit.qtInit[id] );
     1231
     1232                    if ( ! window.wpActiveEditor ) {
     1233                        window.wpActiveEditor = id;
    12331234                    }
    12341235                }
Note: See TracChangeset for help on using the changeset viewer.