如何通过ajax/jQuery加载wp_Editor()

时间:2012-05-10 作者:Aaron Wagner

我有一个定制的主题,非常复杂。我拥有多个内容区域,用户可以在其中为特定选项卡指定内容。我通过wp_editor() 作用它工作得很好。(这都是在管理端的“页面”帖子类型中)

然而,我开始做一些改进,包括动态添加/删除选项卡的能力(之前,我在页面上加载了6个编辑器)。用户可能有1-7个选项卡。

当用户添加选项卡时,需要向页面添加编辑器实例。然而,无论我尝试什么,我都无法让它正确加载和显示。

以下是我迄今为止尝试过的两件事:

创建一个包含管理引导程序的php文件,然后加载编辑器wp_editor(). 然后我执行jQuery$.load 调用页面并在需要显示的区域中包含生成的HTML。然而,这并不能真正起作用,因为编辑器的格式按钮消失了(值得注意的是,直接向上拉页面,编辑器可以完美地显示和运行)

  • 将编辑器加载到页面上的隐藏div中,然后在添加选项卡后,使用jquery将其移动到位。这会自动加载编辑器,但您不能使用任何编辑器按钮(它们会显示,但不会执行任何操作),也不能将光标放在文本区域(奇怪的是,切换到HTML模式允许键入和与HTML模式按钮进行一些交互)
  • 所以问题是,有人通过AJAX调用添加编辑器吗?有什么建议吗?

    8 个回复
    SO网友:Dale Sattler

    要显示QuickTag,需要在ajax oncomplete处理程序中重新实例化它们。

    quicktags({id : \'editorcontentid\'});
    
    我的ajax成功处理程序如下所示;

    success: function(data, textStatus, XMLHttpRequest){
                //append editor to dom
                $(\'#container\').append($(data).html());
                //init quicktags
                quicktags({id : \'editorcontentid\'});
                //init tinymce
                tinymce.init(tinyMCEPreInit.mceInit[\'editorcontentid\']);
            }
    
    我首先调用一个静态函数来创建编辑器并将其缓存为变量,从而成功地加载了编辑器。我在init上运行编辑器创建方法。这似乎可以让wordpress生成所有必需的脚本。

    重要的是,在创建编辑器实例时,应将其设置为使用tinymce,这样tinymce js文件也会被加密。

    SO网友:Goran Jakovljevic

    经过努力,在添加新元素后的回调中找到了有效的解决方案:

    tinymce.execCommand( \'mceAddEditor\', true, element.id );
    
    奇怪的是,codex中没有文档。

    SO网友:T.Todua

    最后,工作解决方案:

    在wordpress中添加操作,比如My_Action_Name (另请注意,text区域IDMy_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;
    });
    
    现在,在Dashboard中执行此函数(注意,使用My_TextAreaID_22My_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
    

    SO网友:Steven

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

    $.fn.tinymce_textareas = function(){
      tinyMCE.init({
        skin : "wp_theme"
        // other options here
      });
    };
    
    然后在ajax之后调用函数,如下所示:

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

    SO网友:bueltge

    @toscho上的可用解决方案github.他建立了这个很好的结果,也是为了一个问题,请参见his answer 了解更多详细信息。

    SO网友:Tim Matz

    我是这样管理的:

    首先,您需要在主页上调用wp\\u编辑器,从这里可以调用ajax。但您必须将其包装在隐藏的div中:

    
        <div style="display:none">
        <?php
        wp_editor( \'\', \'unique_id\', array(
            \'media_buttons\' => false,
            \'textarea_rows\' => 10,
            \'teeny\' => true,
        ) );
        ?>
        </div>
    
    Id必须是rundom且唯一。设置必须与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

    SO网友:Isaac Levi Felix Salinas

    这将适用于管理页面。

    要通过JS AJAX将新的wp编辑器附加到容器中,请执行以下操作:

    1) 在函数中创建wp\\u ajax函数。php返回wp\\u编辑器

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

    PHP文件

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

    SO网友:EFB Technology

    使用此代码,希望对您有所帮助:

    wp_editor( \'\', \'custom_editor_id\' );
    \\_WP_Editors::enqueue_scripts();
    print_footer_scripts();
    \\_WP_Editors::editor_js();
    
    可以找到更多详细信息here.

    结束

    相关推荐

    从异步上传.php的AJAX响应中获取ID

    它是一个wordpress+jQuery 问题无法在stackoverflow上发布,因为我相信它也涉及wordpress知识。What I am trying to achieve:我将wordpress async media uploader附加到“add post”页的metabox上,这样用户只需将大量图像拖放到uploader中即可上载,而无需每次插入一次(请参见图片)。我正在将附件ID保存在帖子元上,以便用户可以将一个图像附加到多个帖子。Question: 当上载者将上载请求发送到async