Inserting a media file into multiple TinyMCE editors in WordPress

David Ogilo posted 04th May 2011 at 13:43

Whilst adding custom meta boxes to a content type in WordPress, I noticed that when inserting a media file into a custom text editor it always gets added to the content text editor. The reason for this is because the active editor is hardcoded in the source code, as shown below in wp-admin/js/media-upload.dev.js line 64:

if ( typeof tinyMCE != 'undefined' && tinyMCE.activeEditor )
{
	tinyMCE.get('content').focus();
	tinyMCE.activeEditor.windowManager.bookmark = tinyMCE.activeEditor.selection.getBookmark('simple');
}

I looked into fixing the issue, below is an explanation of how I did it. This fix can only be done via a plugin, so either create a new one or extend your existing plugin. Also, the custom text editor needs to be loaded in the meta box via the the_editor function

As stated above the active editor needs to be changed dynamically without amending the core WordPress source files. To do this, an onClick event needs to be added to the media buttons so that when clicked, the active editor is registered. Once the media modal is loaded, again the active editor needs to be registered by checking the parent active editor that was initiated earlier. Below is the JavaScript source code:

var activeTinyEditor = '';
 
jQuery( document ).ready( function(){
	jQuery( '#media-buttons a' ).live( 'click', function(){
		var id = jQuery( this )
				.closest( '#editor-toolbar' )
				.siblings( '#editorcontainer')
				.children( 'textarea' )
				.attr( 'id' );
 
		activeTinyEditor = id;
	});
 
	if ( parent != self )
	{
		if ( typeof parent.tinyMCE != 'undefined' && parent.tinyMCE.activeEditor ) {
			parent.tinyMCE.get( parent.activeTinyEditor ).focus();
			parent.tinyMCE.activeEditor.windowManager.bookmark = parent.tinyMCE.activeEditor.selection.getBookmark('simple');
		}
	}
});

The JavaScript source above needs to be loaded when editing or adding a new post/custom post type. To do this we need to use the enqueueScript action hook as shown below:

add_action( 'admin_enqueue_scripts', 'myEnqueueScript' );
 
function myEnqueueScript()
{
	global $hook_suffix;
 
	switch ( $hook_suffix )
	{
		case 'post.php':
		case 'post-new.php':
		case 'media-upload.php':
			wp_enqueue_script( 'post', plugins_url( 'my_plugin' ) . '/files/js/post.js', array( 'jquery' ), 1, true );
 
			break;
	}
}

Xadi11 years agoreply

Hi, I have a similar issue with the insert-media button. I have 2 instances of tinyMCE with both Add Media button. When I add a media in one of the two tinyMCE, all my media will go in this after, whatever which insert-media button I click on.

For instance, if I add a media in my tinyMCE-1 by clicking my media button of tinyMCE-1, it will add my media in it all is good.

But if I now want to add another media in tinyMCE-2 by clicking on media button of tinyMCE-2, it will add on the tinyMCE-1 !

I don’t unerstand why at all. I am stuck here for several days. I checked and the activeEditor is tinyMCE-1 when it has to be and same for tinyMCE-2…

Thanks for helping me !

huybui11 years agoreply

Thanks! it’s work

Sam Alexander14 years agoreply

Hey David,

Thanks for the code snippet. I’ve got a fundamental question. How are you adding the media button to the extra tinymce editors?

David14 years agoreply

Hi Sam,

You can add the media buttons by using the_editor function to render the tinymce editor, example shown below:

/**
* @param string $content The content to show - required
* @param string|int $id The id for the editor - required
*/
 
function showEditor( $content, $id )
{
	the_editor( $content, $id );
}

Hope that helps.

Old school browser detected!