如果父级在渲染时不显示任何内容，则 Wordpress 编辑器将不起作用

Posted 2023-02-22

【中文标题】如果父级在渲染时不显示任何内容，则 Wordpress 编辑器将不起作用

【英文标题】：Wordpress editor don't work if parent has display none when rendered

【发布时间】：2015-08-31 20:57:11

【问题描述】：

我正在尝试打开一个带有文本字段和 wp_editor 的弹出窗口。这已经在页脚中呈现，但只显示无。我将在下面给出我尝试过的代码，但没有一项工作达到 100%，最多只能达到 90%。他们都有不同的错误，如果我们能以一种或另一种方式解决它，那没关系。

我尝试过的：

试一试：我在编辑器中初始化一个文本区域，弹出窗口不显示

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 );

尝试二：我用的是普通的wp_editor，弹窗显示无。

PHP：

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

Javascript：

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

在试一试中，它可以像平常一样编辑我只在我标记编辑器中已有的文本时出现控制台错误，当我尝试编辑链接时我无法编辑文本框中的内容，弹出窗口出现但我无法编辑它。 在尝试二中，如果 wp 编辑器在渲染时可见，则它可以 100% 工作，但如果在父级上显示为无，则它根本不起作用。

提前致谢！

【参考方案1】：

我在我目前正在开发的网站上使用 jQuery 进行了类似的设置。我的编辑器使用 AJAX 从不同的页面加载到具有“ajax_editor”类的 div 中，然后立即淡出：

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.");
                        );
                    );        
    

然后我使用fadeIn 和fadeOut 来显示或隐藏编辑器：

function openEditor() 
    $(".ajax_editor").fadeIn(500);


function closeEditor() 
    $(".ajax_editor").fadeOut(500);