wp_editor doesn't display "Add Media" button in Firefox, Safari or Chrome

[jdorner]

When using wp_editor on the front end, the "Add Media" button shows when using Chrome on Windows, but not when using Firefox, MSIE 11 or Safari on Windows or Chrome on a Mac.

To reproduce, insert the following code in any theme template or front end script.

<form>
<?php wp_editor( 'content', 'editor_id'); ?>
</form>

It worked in version 4.4.3
It stopped working in version 4.5

[iseulde]

Thank you for the ticket. This seems to work fine here in those browsers. What theme are you trying this with? Any JS errors?

[azaozz]

I find it very strange for the button to show in one browser but not in any other. Can you also look at the HTML source to see if it is there?

[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>

[jdorner]

I initially discovered this problem when I updated from 4.4 to 4.5 on a linux server.

[azaozz]

Still cannot reproduce. It looks like you're not logged in when testing in the other browsers. In that case you have no permission to upload files, use the media library, etc. Unauthenticated users and even users with the "contributor" role cannot do that.

[jdorner]

DOH!!! Sorry to waste your time.

[azaozz]

No problems, glad it wasn't a regression.