动态生成的 Wordpress 所见即所得编辑器 (wp_editor) 无法正确显示

Posted 2023-02-19

【中文标题】动态生成的 Wordpress 所见即所得编辑器 (wp_editor) 无法正确显示

【英文标题】：Dynamically generated Wordpress Wysiwyg Editor ( wp_editor ) not displaying properly

【发布时间】：2013-08-01 15:40:49

【问题描述】：

我在 wordpress 管理页面上有 2 个 html 所见即所得的编辑器。两者都使用 WP_EDITOR() 函数。第一个是硬编码到页面中的：

<form name="form1" id="form1" method="post" action="" style="display:block;">
  <p>
    <!-- editor here -->
    <?php
       wp_editor( 'CONTENT WILL APPEAR HERE!', 'addsometxt', array('textarea_name'=>'create_txt','textarea_rows'=>10,'wpautop'=>false));
    ?>
  </p>
  <p>
   <input name="save" type="submit" class="button-primary" id="save" style="margin:5px;" value="Save Input" /></p>
</form>

第二个是通过 PHP 函数使用 AJAX 调用（wp_ajax_ 和 $.post）动态生成的。我已经测试了 ajax 调用并且知道它有效；因此，为简洁起见，这里是 php 函数：

<?php
function display_editor2() 
// grab data from database (data_from_db) and display in editor
  wp_editor( $row->data_from_db, 'editsometxt', array('textarea_name'=>'edit_txt','textarea_rows'=>10,'wpautop'=>false));

 
?>

问题是即使第二个编辑器正在显示；它缺少所有工具栏按钮。请参见下图进行说明。有谁知道谁来解决这个问题？

【问题讨论】：

我花了数周时间试图让 wp_editor() 通过 AJAX 正确调用，但我仍然不知道它是如何正确完成的。它带来了各种奇妙的问题。如果我是你，我会在你仍然领先的时候放弃 - 尝试一种不需要 wp_editor() 和 Ajax 的不同方法。

@Joe Buckle——哈哈！是的，情况似乎很严峻。可能不得不侵入tinymce。在我的研究中，我发现了一些可能的解决方案： Kathy Is Awesome 在这里 - tinyurl.com/ovu2x89 上述是基于 Dimas Begunoff 在这里的 tut （使用他的 WPAlchemy Metaboxes）：tinyurl.com/cp55h3d 最符合我需求的解决方案在下一个链接上，但我无法让它工作：tinyurl.com/kkdmlkk

我也浏览了所有这些链接。当我早上回到办公室时，我会反思我的方法。我构建了一个动态添加全功能编辑器的插件，但不是以这种方式。和我一起裸露

还没有解决办法吗？ :( 我在使用 Handlebars 和弹出对话框来显示 RTE 时遇到了类似的问题。仍然没有有效的解决方案 :( ***.com/questions/18347099/…

@diosney -- 实际上，我仔细研究了这里的解决方案并让它发挥作用：tinyurl.com/obah2eq。我遇到的唯一问题是 QuickTags 仍然没有显示。最后，我选择了解决方法。

【参考方案1】：

我遇到了完全相同的问题并以这种方式解决了（WP 4.7）：

首先在您的模板中创建一个隐藏的编辑器，以便 WP 为 TinyMCE 加载所有必要的文件（ID 无关紧要）：

<div style="display:none"><?php wp_editor('', 'hidden_editor'); ?></div>

然后将新编辑器附加到 DOM 后，使用以下函数：

quicktags(id :'your_new_editor_id');
tinymce.execCommand('mceAddEditor', true, 'your_new_editor_id');

使用 tinymce.init 对我不起作用，因为无法识别新的编辑器 ID。这两行重新实例化了快速标签并添加了新的编辑器。

【参考方案2】：

我遇到了同样的问题，使用这个：

<?php wp_editor(get_the_content()); ?>

通过传递一个 ID（第二个参数给 wp_editor）我得到了按钮。 像这样：

<?php wp_editor(get_the_content(), "with_a_ID_its_buttons_are_showing"); ?>

【参考方案3】：

我遇到了同样的问题。

当我在 footer.php 中添加代码 <?php wp_footer(); ?> 时，它可以工作。

【讨论】：

@Markus 正确阅读。他还提供了一个解决方案。

【参考方案4】：

嘿，我也有同样的问题！

我刚刚停用了我安装的所有插件并刷新了页面，然后我也尝试在可视区域中编辑帖子/页面。检查一次它会为你工作。 :)

【参考方案5】：

您可能需要在 AJAX 调用中添加 media_buttons 和 tinymce 参数。

类似这样的：

<?php
function display_editor2() 
    // grab data from database (data_from_db) and display in editor
    wp_editor( $row->data_from_db, 'editsometxt', array('textarea_name'=>'edit_txt','media_buttons'=>true,'tinymce'=>true,'textarea_rows'=>10,'wpautop'=>false));

     
?>

我建议您查看 Wordpress Codex 上的 wp_editor() 函数参考页面。

【讨论】：

'media_buttons' 默认为 true。它控制“上传/插入”文本和图标，而不是我所指的按钮。