Changeset 41985

Timestamp:

10/24/2017 04:06:23 AM (9 years ago)

Author:

westonruter

Message:

Editor: Specify maxwidth in parse-embed requests based on width of editor iframe so that TinyMCE view embeds fit, particularly in Text widgets.

See #40854, #34115.

Location:

trunk/src

Files:

• wp-admin/includes/ajax-actions.php (modified) (2 diffs)
• wp-includes/js/mce-view.js (modified) (4 diffs)
• wp-includes/js/tinymce/plugins/wpview/plugin.js (modified) (1 diff)

trunk/src/wp-admin/includes/ajax-actions.php

@@ -2994 +2994 @@
  * @global WP_Embed   $wp_embed   Embed API instance.
  * @global WP_Scripts $wp_scripts
+ * @global int        $content_width
  */
 function wp_ajax_parse_embed() {
-        global $post, $wp_embed;
+        global $post, $wp_embed, $content_width;
 
         if ( empty( $_POST['shortcode'] ) ) {
@@ -3035 +3036 @@
                 if ( ! $parsed ) {
                         $no_ssl_support = true;
+                }
+        }
+
+        // Set $content_width so any embeds fit in the destination iframe.
+        if ( isset( $_POST['maxwidth'] ) && is_numeric( $_POST['maxwidth'] ) && $_POST['maxwidth'] > 0 ) {
+                if ( ! isset( $content_width ) ) {
+                        $content_width = intval( $_POST['maxwidth'] );
+                } else {
+                        $content_width = min( $content_width, intval( $_POST['maxwidth'] ) );
                 }
         }

trunk/src/wp-includes/js/mce-view.js

@@ -86 +86 @@
                  *
                  * @param {String} content The string to scan.
+                 * @param {tinymce.Editor} editor The editor.
                  *
                  * @return {String} The string with markers.
                  */
-                setMarkers: function( content ) {
+                setMarkers: function( content, editor ) {
                         var pieces = [ { content: content } ],
                                 self = this,
@@ -116 +117 @@
                                                 }
 
+                                                result.options.editor = editor;
                                                 instance = self.createInstance( type, result.content, result.options );
                                                 text = instance.loader ? '.' : instance.text;
@@ -851 +853 @@
 
                 initialize: function() {
-                        var self = this;
+                        var self = this, maxwidth = null;
 
                         if ( this.url ) {
@@ -860 +862 @@
                         }
 
+                        // Obtain the target width for the embed.
+                        if ( self.editor ) {
+                                maxwidth = self.editor.iframeElement.clientWidth - 20; // Minus the sum of horizontal margins and borders.
+                        }
+
                         wp.ajax.post( this.action, {
                                 post_ID: media.view.settings.post.id,
                                 type: this.shortcode.tag,
-                                shortcode: this.shortcode.string()
+                                shortcode: this.shortcode.string(),
+                                maxwidth: maxwidth
                         } )
                         .done( function( response ) {

trunk/src/wp-includes/js/tinymce/plugins/wpview/plugin.js

@@ -89 +89 @@
                         }
 
-                        event.content = wp.mce.views.setMarkers( event.content );
+                        event.content = wp.mce.views.setMarkers( event.content, editor );
                 } );