ฉันมีชุดรูปแบบที่พัฒนาขึ้นเองและซับซ้อนมาก หนึ่งในสิ่งที่ฉันมีคือหลายพื้นที่เนื้อหาที่ผู้ใช้สามารถระบุเนื้อหาสำหรับแท็บเฉพาะ ฉันโหลดตัวแก้ไข WordPress หลายอินสแตนซ์ผ่านwp_editor()ฟังก์ชั่น มันทำงานได้อย่างสมบูรณ์ (นี่คือทั้งหมดที่ด้านผู้ดูแลระบบในประเภทโพสต์ "หน้า")

อย่างไรก็ตามฉันเริ่มทำการปรับปรุงเล็กน้อยรวมถึงความสามารถในการเพิ่ม / ลบแท็บแบบไดนามิก (ก่อนหน้านี้ฉันโหลดตัวแก้ไข 6 ตัวบนหน้าเว็บ) ผู้ใช้อาจมี 1-7 แท็บ

เมื่อผู้ใช้เพิ่มแท็บนั้นจะต้องเพิ่มอินสแตนซ์ของตัวแก้ไขในหน้า อย่างไรก็ตามไม่ว่าฉันจะพยายามอะไรฉันก็ไม่สามารถโหลดและแสดงผลได้อย่างถูกต้อง

นี่คือ 2 สิ่งที่ฉันได้ลองไปแล้ว:

1. สร้างไฟล์ PHP wp_editor()ที่มีบูตผู้ดูแลระบบรวมแล้วโหลดโปรแกรมแก้ไขด้วย จากนั้นฉันจะทำ jQuery $.loadเพื่อโทรหาหน้าและรวม HTML ที่เป็นผลลัพธ์ไว้ในพื้นที่ที่ต้องการแสดง วิธีนี้ใช้ไม่ได้ผลเนื่องจากปุ่มการจัดรูปแบบตัวแก้ไขหายไป (มันน่าสังเกตว่าการดึงหน้าขึ้นมาโดยตรงตัวแก้ไขจะแสดงและทำงานได้อย่างสมบูรณ์)
2. โหลดเอดิเตอร์บนหน้าภายใน div ที่ซ่อนอยู่จากนั้นเมื่อเพิ่มแท็บแล้วให้ใช้ jquery เพื่อย้ายลงในตำแหน่ง สิ่งนี้จะโหลดตัวแก้ไขอย่างชาญฉลาด แต่คุณไม่สามารถใช้ปุ่มตัวแก้ไขใด ๆ (พวกเขาแสดง แต่ไม่ได้ทำอะไรเลย) และคุณไม่สามารถวางเคอร์เซอร์ของคุณในพื้นที่ข้อความ (อย่างไรก็ตามอยากรู้อยากเห็นว่าสลับไปยังโหมด HTML อนุญาตให้พิมพ์และโต้ตอบกับปุ่มโหมด HTML)

ดังนั้นคำถามคือมีใครมีโชคเพิ่มบรรณาธิการผ่านสาย AJAX หรือไม่ คำแนะนำใด ๆ?

ในการรับแท็กอย่างรวดเร็วเพื่อแสดงคุณต้องสร้างอินสแตนซ์ใหม่ให้ภายในตัวจัดการ ajax ที่ไม่สมบูรณ์

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 เพื่อ enque สคริปต์ที่จำเป็นทั้งหมด

สิ่งสำคัญคือเมื่อคุณสร้างอินสแตนซ์เอดิเตอร์ของคุณคุณต้องตั้งค่าให้ใช้ tinymce ด้วยวิธีนี้ไฟล์ tinymce js จะถูก enqued เช่นกัน

หลังจากดิ้นรนกับมันพบวิธีแก้ปัญหาที่ใช้งานได้ในการติดต่อกลับหลังจากที่คุณเพิ่มองค์ประกอบใหม่:

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

มันแปลกที่ไม่มีเอกสารประกอบอยู่ภายใน codex

ในที่สุดการแก้ปัญหาการทำงาน:

เพิ่มการดำเนินการใน 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;
});

ตอนนี้ใน Dashboard ให้เรียกใช้ฟังก์ชั่นนี้ (note, using My_TextAreaID_22and 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

คุณต้องเรียกโปรแกรมแก้ไข init อีกครั้งเมื่อคุณเพิ่ม ajax textarea ของคุณฉันทำแบบนี้:

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

จากนั้นเรียกใช้ฟังก์ชันหลังจากอาแจ็กซ์ของคุณเช่นนี้

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

ทางออกที่สามารถใช้งานได้จาก @toscho บนGitHub เขาสร้างผลลัพธ์ที่ดีสำหรับคำถามที่นี่ดูคำตอบของเขาสำหรับรายละเอียดเพิ่มเติม

ใช้รหัสนี้หวังว่ามันจะช่วย:

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

รายละเอียดเพิ่มเติมสามารถพบได้ที่นี่

ฉันจัดการด้วยวิธีนี้:

1. ก่อนอื่นคุณต้องโทรหา wp_editor ที่หน้าหลักจากที่คุณโทร ajax แต่คุณต้องปิดมันใน div ที่ซ่อนอยู่:

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

รหัสต้องไม่ซ้ำและไม่ซ้ำ การตั้งค่าจะต้องเหมือนกับการตั้งค่าใน ajax editor ของคุณ

2. ประการที่สองคุณต้องเรียกสิ่งนี้ว่า ajax response:

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

สิ่งนี้จะทำงานในหน้าผู้ดูแลระบบ

ในการผนวกตัวแก้ไข wp ใหม่เข้ากับคอนเทนเนอร์โดย JS AJAX:

1) สร้างฟังก์ชั่น wp_ajax ใน functions.php เพื่อส่งคืน wp_editor

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 Script (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');