Wordpress editor does not work if the parent does not have a display when rendering

Question

I am trying to open a popup with text fields and wp_editor. This is already displayed in the footer, but only displayed. I will give you my code below what I tried, but not a single job was 100% to 90% maximum. Both of them have different errors, if we can solve them anyway, it does not matter.

What I tried:

Try it: I create a text box in the editor and the popup does not display

PHP:

_WP_Editors::editor($option["value"], 'pbcontent', array('drag_drop_upload' => true )); ?> <script type="text/javascript"> et_tinyMCEPreInit */ jQuery(document).ready(function(e) { if(typeof( et_tinyMCEPreInit ) == 'undefined') { et_tinyMCEPreInit = JSON.stringify(tinyMCEPreInit); } }); </script> <?php 

JavaScript:

 var str = et_tinyMCEPreInit; var ajax_tinymce_init = JSON.parse(et_tinyMCEPreInit); ajax_tinymce_init.mceInit.pbcontent.plugins = ajax_tinymce_init.mceInit.content.plugins.replace('fullscreen,', '') ajax_tinymce_init.mceInit.pbcontent.toolbar1 = ajax_tinymce_init.mceInit.content.toolbar1.replace('dfw,', '') tinymce.get('pbcontent').remove(); console.log(ajax_tinymce_init.mceInit.pbcontent); tinymce.init( ajax_tinymce_init.mceInit.pbcontent ); 

Try two: I use the usual wp_editor, and the popup does not appear.

PHP:

 wp_editor($content, 'pbcontent'.$module_count); 

JavaScript:

 I have no clue how I could "re-init" the visual editor. 

In an attempt, it works to edit, as usual, I get only a console error when I put text that is already in the editor, and I can’t change that in the text box, when I try to edit the link, a popup window appears, but I can not change it. In attempt two, it works at 100% if the wp editor is visible during rendering, but if rendered with none on the parent, it doesn't work at all.

Thanks for this!

Answer 1

I have a similar setup on the site I'm currently working on using jQuery. My editor is loaded from another page using AJAX into a div with the class "ajax_editor", and then disappears immediately:

 function loadEditor() { $.ajax({url: "post-editor", success: function(result){ $('.ajax_editor').addClass('active').html(result).fadeOut(0,function () { $('.header .editor').prop( "disabled", false ).attr("placeholder", "Let us know what you're thinking - post something."); }); }}); } 

Then I use fadeIn and fadeOut to show or hide the editor:

 function openEditor() { $(".ajax_editor").fadeIn(500); } function closeEditor() { $(".ajax_editor").fadeOut(500); }