如何通过AJAX / jQuery加载wp_editor（）

我有一个定制开发且非常复杂的主题。我拥有的一件事是多个内容区域，用户可以在其中为特定选项卡指定内容。我通过wp_editor()函数加载了WordPress编辑器的多个实例。完美运作。（这全是管理员方面的“页面”帖子类型）

但是，我开始进行了一些改进，包括动态添加/删除标签的功能（之前，我加载了6个编辑器在页面上）。用户可能具有1-7个标签。

用户添加标签时，需要在页面上添加编辑器实例。但是，无论我尝试什么，都无法正确加载和显示它。

这是到目前为止我尝试过的两件事：

创建一个包含管理员引导程序的php文件，然后使用wp_editor()加载编辑器。然后，我执行一个jQuery $.load来调用该页面，并将生成的HTML包含在它需要显示的区域中。但是，这实际上并没有用，因为编辑器的格式化按钮消失了（值得注意的是，直接拉动页面，编辑器可以完美显示和运行）
将编辑器加载到页面的隐藏div中，然后添加标签后，使用jquery将其移动到位。这样可以完整地加载编辑器，但是您不能使用任何编辑器按钮（它们可以显示，但什么也不做），也不能将光标放在文本区域（但是，很奇怪，切换到HTML模式允许输入文字并与HTML模式按钮进行一些交互）

所以问题是，有人通过AJAX调用添加编辑器有幸吗？有什么建议吗？

您是否尝试通过admin-ajax.php进行ajax调用？如果没有使用您的代码创建函数，请通过admin-ajax.php
调用它

这个建议有帮助吗？如果是这样，那不是WordPress问题。 :)

@Sisir，如果我正确阅读了您的建议，则该方法无效。我用它来调用Ajax形式：$（'＃sph-tabs-section-tab'+ newTab）.load（'/ wp-admin / admin-ajax.php？action = sph_add_editor'）;然后添加了一个返回wp_editor（）的函数。可以毫无问题地调用它，但是它仍然只返回没有按钮的编辑器。（与OP中的项目1完全相同）

初始化后，TinyMCE无法在DOM中移动。您必须将其删除，移入DOM并再次初始化。类似的代码，但是我的博客上有前端评论：techytalk.info/…当用户单击回复/取消回复时，评论表单会移动。

#1 楼

要显示快速标签，您需要在ajax oncomplete处理程序中重新实例化它们。

quicktags({id : 'editorcontentid'});

我的ajax成功处理程序如下所示；
<我设法通过首先调用一个静态函数来加载编辑器，该静态函数创建编辑器并将其缓存为变量。我在init上运行编辑器创建方法。这似乎让wordpress占用了所有必需的脚本。

重要的是，在创建编辑器实例时，将其设置为使用tinymce，这样一来，tinymce js文件也将被入队。

#2 楼

苦苦挣扎之后，在添加新元素之后的回调中找到了可行的解决方案：

tinymce.execCommand( 'mceAddEditor', true, element.id );

奇怪的是，法典内部的文档数量为零。 >

tinymce是一个外部资源，所以我认为他们可能会认为tinymce自己的文档涵盖了它-tinymce.com/docs-但在示例方面相当差……而且您必须包括tincemce脚本才能使该答案起作用！（最简单的方法是输出一个虚拟PHP wp_editor（），并将tinymce arg设置为true :-）

–jave.web
16-4-20在20:34

谢谢队友...这对我也很好-从ajax返回数据后，我只是初始化了...;）

–敏捷的SEO
19年7月2日在8:55

#3 楼

最后，可行的解决方案：

在wordpress中添加操作，让我们说My_Action_Name（也请注意，textarea ID My_TextAreaID_22）：

add_action('wp_ajax_My_Action_Name', function(){
    wp_editor( $_POST['default_text'], 'My_TextAreaID_22',      $settings = array( 'tinymce'=>true, 'textarea_name'=>'name77', 'wpautop' =>false,   'media_buttons' => true ,   'teeny' => false, 'quicktags'=>true, )   );    exit;
});

现在，在仪表板，执行此功能（注意，使用My_TextAreaID_22和My_Action_Name）：

function start_Ajax_request() { 
    My_New_Global_Settings =  tinyMCEPreInit.mceInit.content;       // Get default Wordpress SETTINGS  ( I cant confirm, but if you will need to change target ID, then add this line:  My_New_Global_Settings.selector = "My_TextAreaID_22";   )
    jQuery.post(ajaxurl,
        { action: "My_Action_Name",     default_text: "Hello World"}, 
        function(response,status){ 
            tinymce.init(My_New_Global_Settings); 
            tinyMCE.execCommand('mceAddEditor', false, "My_TextAreaID_22"); 
            quicktags({id : "My_TextAreaID_22"});
            // tinyMCE.execCommand( 'mceAddEditor', true, element.id );
        }
    );

}   
start_Ajax_request();     // < ---- EXECUTE

#4 楼

添加ajax文本区域后，您需要再次调用编辑器init，我这样做是这样的：

$.fn.tinymce_textareas = function(){
  tinyMCE.init({
    skin : "wp_theme"
    // other options here
  });
};

然后在ajax之后调用函数，如下所示：

$('#my_new_textarea_container').html(response).tinymce_textareas();

请说明这是如何工作的？这是行不通的。我尝试过这个。

–艾哈迈德·福阿德（Ahmed Fouad）
2012年7月18日在18:09

在添加了包含我要tinyMCE的textarea的ajax内容（响应）之后，调用tinymce_textareas函数，该函数在新的textareas上初始化tinyMCE。

–史蒂文
13年7月18日在10:46

#5 楼

来自github上@toscho的可用解决方案。
他还在此处提出了一个很好的结果，请参见他的答案以获取更多详细信息。

这需要使用一个库-T5 ...不是仅WP的解决方案

–random_user_name
15年1月17日，0：57

#6 楼

我是这样管理的：首先，您需要在主页上调用wp_editor，然后从此处调用ajax。但是您必须将其包装在隐藏的div中：


    <div style="display:none">
    <?php
    wp_editor( '', 'unique_id', array(
        'media_buttons' => false,
        'textarea_rows' => 10,
        'teeny' => true,
    ) );
    ?>
    </div>

Id必须是随机的且唯一的。设置必须与ajax编辑器中的设置相同。

其次，需要在ajax响应中调用此设置：


    wp_editor( '', '[set id as you need]', array(the same settings as in the main page) );
    _WP_Editors::editor_js(); //this print editor init code

#7 楼

这将在管理页面上起作用。

通过JS AJAX将新的wp编辑器附加到容器：

1）在functions.php中创建wp_ajax函数以返回wp_editor

2）创建jQuery脚本，以请求新的文本编辑器并将其附加到容器，在这种情况下，当按下按钮时

PHP File

function yourprefix_get_text_editor() {
    $content = ""; // Empty because is a new editor
    $editor_id = $_POST["text_editor_id"]; // Random ID from AJAX JS call
    $textarea_name = $_POST["textarea_name"]; // Name from JS file
    $settings = array(
        'textarea_name' => $textarea_name
    );
    wp_editor($content, $editor_id, $settings);
    wp_die(); // Mandatory wp_die
}
add_action('wp_ajax_yourprefix_get_text_editor', 'yourprefix_get_text_editor');

JS脚本（jsfile.js）

jQuery(function($) {
$("someelement").click(function(e) { // To Add an Editor from a button click
    var target = themeajax.ajax_url; // Passed from wp_localize_script
    var editor_id = "editorid"; // Generate this dynamically
    var textarea_name = "textareaname" // Generate this as you need
    var data = {
        'action': 'yourprefix_get_text_editor',
        'text_editor_id': editor_id,
        'textarea_name': textarea_name
    }
    $.post(target, data, function(response) {
        container.append(response); // Use your logic to get the container where you want to append the editor
        tinymce.execCommand('mceAddEditor', false, editor_id);
        quicktags({id : editor_id});
    });
}
});

排队脚本调用：

function yourprefix_admin_scripts($hook) {
    wp_enqueue_script('your-slug', get_stylesheet_directory_uri() . '/path/to/jsfile.js', array('jquery'), null, true);
    wp_localize_script('your-slug', 'themeajax', array(
        'ajax_url' => admin_url('admin-ajax.php')
    ));
}
add_action('admin_enqueue_scripts', 'yourprefix_admin_scripts');

#8 楼

使用此代码，希望对您有所帮助：

wp_editor( '', 'custom_editor_id' );
\_WP_Editors::enqueue_scripts();
print_footer_scripts();
\_WP_Editors::editor_js();

可以在此处找到更多详细信息。

请分享本代码如何提供帮助的要点，然后添加链接以获取更多详细信息。如果链接断开，仅链接的答案将无效-希望您理解。 :)

– Mayeenul伊斯兰教
15年4月15日在3:34

该链接目前已断开，答案后面没有任何上下文。（“仅链接”答案不好的众多原因之一）

– Sudar
2015年7月6日在16:51

这可行，但存在一些问题，当您选择文本或视觉效果时，它会在编辑器中创建重复的文本区域

– Drmzindec
17年7月28日在14:14

编程黑洞网