[wp-trac] [WordPress Trac] #36802: wp_editor doesn't display "Add Media" button in Firefox, Safari or Chrome

[WordPress Trac]

#36802: wp_editor doesn't display "Add Media" button in Firefox, Safari or Chrome
-------------------------------+------------------------------
 Reporter:  jdorner            |       Owner:
     Type:  defect (bug)       |      Status:  new
 Priority:  normal             |   Milestone:  Awaiting Review
Component:  Editor             |     Version:  4.5
 Severity:  normal             |  Resolution:
 Keywords:  reporter-feedback  |     Focuses:  ui, javascript
-------------------------------+------------------------------

Comment (by jdorner):

 I found it very strange too. @azaozz

 @iseulde  No JS errors.

 To remove all issues, I created a new site (WP 4.6.1) and used the Twenty
 Sixteen theme.
 I edited the Hello Dolly plugin to add the following code:


 {{{
 function custom_shortcode() {
   echo '<form>';
   wp_editor('test', 'test', array('media_buttons'=>true));
   echo '</form>';
 }
 add_shortcode('testing', 'custom_shortcode');
 }}}


 Then, I added the testing shortcode to a page and view the page in Chrome
 and Firefox.
 I've duplicated this on two different Windows computers. One using XAMPP
 and the other using DesktopServer.
 With Chrome, the "Add Media" button works. With Firefox, the "Add Media"
 doesn't exist, but everything else with the editor works fine.

 Here's the HTML code form Firefox:

 {{{
 <form><div id="wp-test-wrap" class="wp-core-ui wp-editor-wrap tmce-
 active"><link rel='stylesheet' id='dashicons-css'
 href='http://www.wordpress.dev/wp-
 includes/css/dashicons.min.css?ver=4.6.1' type='text/css' media='all' />
 <link rel='stylesheet' id='editor-buttons-css'
 href='http://www.wordpress.dev/wp-includes/css/editor.min.css?ver=4.6.1'
 type='text/css' media='all' />
 <div id="wp-test-editor-tools" class="wp-editor-tools hide-if-no-js"><div
 class="wp-editor-tabs"><button type="button" id="test-tmce" class="wp-
 switch-editor switch-tmce" data-wp-editor-id="test">Visual</button>
 <button type="button" id="test-html" class="wp-switch-editor switch-html"
 data-wp-editor-id="test">Text</button>
 </div>
 </div>
 <div id="wp-test-editor-container" class="wp-editor-container"><div
 id="qt_test_toolbar" class="quicktags-toolbar"></div><textarea class="wp-
 editor-area" rows="20" autocomplete="off" cols="40" name="test"
 id="test">test</textarea></div>
 </div>
 </form>
 }}}


 Here's the code from Chrome:

 {{{
 <form><div id="wp-test-wrap" class="wp-core-ui wp-editor-wrap html-
 active"><link rel='stylesheet' id='editor-buttons-css'
 href='http://www.wordpress.dev/wp-includes/css/editor.min.css?ver=4.6.1'
 type='text/css' media='all' />
 <div id="wp-test-editor-tools" class="wp-editor-tools hide-if-no-js"><div
 id="wp-test-media-buttons" class="wp-media-buttons"><button type="button"
 id="insert-media-button" class="button insert-media add_media" data-
 editor="test"><span class="wp-media-buttons-icon"></span> Add
 Media</button></div>
 <div class="wp-editor-tabs"><button type="button" id="test-tmce" class
 ="wp-switch-editor switch-tmce" data-wp-editor-id="test">Visual</button>
 <button type="button" id="test-html" class="wp-switch-editor switch-html"
 data-wp-editor-id="test">Text</button>
 </div>
 </div>
 <div id="wp-test-editor-container" class="wp-editor-container"><div
 id="qt_test_toolbar" class="quicktags-toolbar"></div><textarea class="wp-
 editor-area" rows="20" autocomplete="off" cols="40" name="test"
 id="test">test</textarea></div>
 </div>
 </form>
 }}}

--
Ticket URL: <https://core.trac.wordpress.org/ticket/36802#comment:5>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform