WordPress TinyMCE Ajax Dropdowns Not Dropping

Hello,

After much effort I have Tinymce working in a file called via ajax within WordPress. HOWEVER, the dropdown menus will not function.

Here is my JS code which IS causing the tinymce to capture my textfield. It is working perfectly.

None of the drop downs work. The color picker, format, view etc drop down menus will not drop down. So this is my issue at present.

Here is my loading tinymce code:

wp_enqueue_script( ‘tinymce_js’, includes_url( ‘js/tinymce/’ ) . ‘wp-tinymce.php’, array( ‘jquery’ ), false, true );

Here is my JS code

jQuery( document ).ready(function() {
textareaId='c_tfield1';
tinymce.init({
mode : "specific_textareas",
content_css : "PLUGINS_URL/cm-core/both-ends/css/tinymce.css",
elements : 'pre-details',
editor_selector : "tinymce",
skin: "lightgray",

statusbar : false,
plugins: "textcolor colorpicker",
textcolor_cols: "5",
browser_spellcheck: true,
toolbar: [
"bold italic | alignleft aligncenter alignright | bullist numlist outdent indent | undo redo | forecolor backcolor"
],
setup: function(editor) {
editor.on('blur', function(e) {
jQuery('#c_tfield1').html(tinymce.get('c_tfield1').getContent());
jQuery("#c_tfield1").trigger('focusout');
});
},
style_formats: [
{ title: 'Bold text', inline: 'strong' },
{ title: 'Red text', inline: 'span', styles: { color: '#ff0000' } },
{ title: 'Red header', block: 'h1', styles: { color: '#ff0000' } },
{ title: 'Badge', inline: 'span', styles: { display: 'inline-block', border: '1px solid #2276d2', 'border-radius': '5px', padding: '2px 5px', margin: '0 2px', color: '#2276d2' } },
{ title: 'Table row 1', selector: 'tr', classes: 'tablerow1' }
],
formats: {
alignleft: { selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'left' },
aligncenter: { selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'center' },
alignright: { selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'right' },
alignfull: { selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'full' },
bold: { inline: 'span', 'classes': 'bold' },
italic: { inline: 'span', 'classes': 'italic' },
underline: { inline: 'span', 'classes': 'underline', exact: true },
strikethrough: { inline: 'del' },
customformat: { inline: 'span', styles: { color: '#00ff00', fontSize: '20px' }, attributes: { title: 'My custom format' }, classes: 'example1' },
},
paste_auto_cleanup_on_paste : true,
paste_postprocess : function( pl, o ) {
o.node.innerHTML = o.node.innerHTML.replace( / +/ig, " " );
}
});
setTimeout(function(){
if (tinymce.editors.length > 0) {
tinymce.execCommand('mceFocus', true, textareaId );
tinymce.execCommand('mceRemoveEditor',true, textareaId);
tinymce.execCommand('mceAddEditor',true, textareaId);
}
}, 500);
});

I have created a youtube video for you to see the improper behavior. https://www.youtube.com/watch?v=58_jIV4vRZE

You’ll notice the dropdowns are not responsive. They also do not throw any errors in console or php log.

Thanks in advance.

Jay