3.9 TinyMCE in Modal, breaks dropdown menu and image edit button not visible

[WPThemeTrends]

I use TinyMCE in modals (bootstrap modal master for multiple modals). It was working well before 3.9 update. Now I have several issues and all of them are TinyMCE inside a modal ;

1 - When I go to "Formats > Headers > ", "Formats > Inline > ", "Formats > Blocks > ", "Formats > Alignment > ". All of those 3rd level menus not visible. They go up above the page (Top left corner with). Also throws a js error ;

Uncaught TypeError: Object #<error> has no method 'split'

2 - Wordpress's default shortcodes are not displayed correctly. For example in the visual view it still shows "[caption]" shortcode. It should display the caption as a wrapper around the image.

3 - No edit/delete icon for image. When I click on an image to edit/delete no icon displayed.

More Information : I'm using javascript way to activate TinyMCE. This is my HTML markup

<div class="wpt-tinymce-container wp-core-ui wp-editor-wrap tmce-active">
	<div id="wp-content-editor-tools" class="wp-editor-tools hide-if-no-js">
		<a class="wpt-tinymce-switch-html wp-switch-editor switch-html" >Text</a>
		<a class="wpt-tinymce-switch-text wp-switch-editor switch-tmce" >Visual</a>
		<div id="wp-content-media-buttons" class="wp-media-buttons"><a href="#" id="insert-media-button" class="button insert-media add_media" data-editor="test_tiny_editor" title="Add Media"><span class="wp-media-buttons-icon"></span> Add Media</a></div>
	</div>
	<div class="wp-content-editor-container wp-editor-container">
		<textarea autocomplete="off" rows="8" cols="40" name="main-textarea-modal" id="main-textarea-modal" class="wpt-tinymce-textarea wp-editor-area"></textarea>
	</div>
</div>

And this is my javascript code to activate Visual editor ;

window.tinyMCE.execCommand("mceAddEditor", true, tiny.attr("id"));

[azaozz]

Assuming you're loading wp-includes/css/editor.css, is this happening in latest trunk? Some of the new modals z-index used to be hard-coded there, fixed that few days ago: https://core.trac.wordpress.org/changeset/27460/trunk/src/wp-includes/css/editor.css

It would be really helpful if you post some more info about that JS error. Most importantly where/what file it comes from.

[KingYes]

I have same problem.
@WPThemeTrends, Do you want found out any solution?

Yakir.

[azaozz]

Looking at this again, in the example:

window.tinyMCE.execCommand("mceAddEditor", true, tiny.attr("id"));

will add an editor instance with the default settings.

tinymce.init( initObject );

Will let you pass a settings object you want for the editor instance. Have a look at tinyMCEPreInit.mceInit.content on the Edit Post screen. As a minimum you need to specify which plugins to load (if loading plugins not included in WordPress, need to load them in external_plugins) and which buttons to show.

[KingYes]

@azaozz, You are the rock !
Now all work's for me perfect.

BTW, Why I don't see any document about this exeCommand?

[azaozz]

As far as I see execCommand("mceAddEditor"... is deprecated but still supported for back-compat.

[KingYes]

So for now I can use with this. But what I need to change for later?

[KingYes]

Hey @azaozz, I just see for now, when I press the Link popup, it's not working in 3.9.
What I can to do for this?

[iseulde]

It looks like these issues have been solved in the past. Also no detailed feedback from reporter. If you still have any issues, please don't hesitate to reopen with more information.