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.