Saya memiliki tema yang dikembangkan khusus dan sangat kompleks. Salah satu hal yang saya miliki adalah beberapa area konten tempat pengguna dapat menentukan konten untuk tab tertentu. Saya memuat banyak contoh editor WordPress melalui wp_editor()fungsi. Ini bekerja dengan sempurna. (Ini semua di sisi admin, dalam jenis posting "Halaman")

Namun, saya mulai membuat beberapa perbaikan, termasuk kemampuan untuk menambah / menghapus tab secara dinamis (sebelumnya, saya memuat 6 editor pada halaman). Pengguna mungkin memiliki 1-7 tab.

Ketika pengguna menambahkan tab, itu perlu menambahkan contoh editor ke halaman. Namun, apa pun yang saya coba, saya tidak dapat memuat dan menampilkannya dengan benar.

Berikut adalah 2 hal yang saya coba sejauh ini:

1. Buat file php dengan admin bootstrap yang disertakan, dan kemudian memuat editor dengan wp_editor(). Saya kemudian melakukan jQuery $.loaduntuk memanggil halaman dan memasukkan HTML yang dihasilkan di area yang perlu ditampilkan. Ini tidak benar-benar berfungsi, namun, ketika tombol format editor menghilang (perlu dicatat, yang menarik halaman secara langsung, editor menampilkan dan berfungsi dengan sempurna)
2. Memuat editor pada halaman, di dalam div tersembunyi, dan kemudian setelah tab ditambahkan, gunakan jquery untuk memindahkannya ke tempatnya. Ini memuat editor dalam kebijaksanaan, tetapi Anda tidak dapat menggunakan tombol editor mana pun (ditampilkan, tetapi tidak melakukan apa-apa), dan Anda tidak dapat meletakkan kursor di area teks (penasaran, bagaimanapun, yang beralih ke mode HTML memungkinkan pengetikan dan beberapa interaksi dengan tombol mode HTML)

Jadi pertanyaannya adalah, adakah yang beruntung menambahkan editor melalui panggilan AJAX? Ada saran?

Untuk mendapatkan quicktags muncul, Anda perlu instantiate mereka dalam handler ajax oncomplete Anda.

quicktags({id : 'editorcontentid'});

Handler sukses ajax saya terlihat seperti ini;

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']);
        }

Saya berhasil membuat editor memuat dengan terlebih dahulu memanggil fungsi statis yang membuat editor dan menyimpannya sebagai variabel. Saya menjalankan metode pembuatan editor di init. Hal ini tampaknya membuat wordpress mengaktifkan semua skrip yang diperlukan.

Penting bahwa ketika Anda membuat instance editor Anda, bahwa Anda mengaturnya untuk menggunakan tinymce, dengan cara itu file tinymce js juga di-enqued.

Setelah bergumul dengannya, temukan solusi yang berfungsi, dalam panggilan balik setelah Anda menambahkan elemen baru:

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

Aneh bahwa tidak ada dokumentasi di dalam codex.

Akhirnya, solusi kerja:

tambahkan aksi di wordpress, katakanlah My_Action_Name(perhatikan juga, ID teks 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;
});

sekarang, di Dasbor, jalankan fungsi ini (catatan, penggunaan dari My_TextAreaID_22dan 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

Anda perlu memanggil editor init lagi setelah Anda menambahkan ajax textarea Anda, saya melakukannya seperti ini:

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

Kemudian panggil fungsi Anda setelah ajax Anda, seperti ini:

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

Solusi yang dapat digunakan dari @toscho on github . Dia membangun hasil yang bagus ini juga untuk pertanyaan di sini, lihat jawabannya untuk lebih jelasnya.

Gunakan kode ini, semoga akan membantu:

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

Lebih detail dapat ditemukan di sini .

Saya berhasil dengan cara ini:

1. Pertama, Anda perlu memanggil wp_editor di halaman utama, dari mana Anda memanggil ajax. Tetapi Anda harus membungkusnya dengan div tersembunyi:

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

Id harus rundom dan unik. Pengaturan harus sama dengan pengaturan di editor ajax Anda.

2. Kedua, Anda perlu menyebutnya sebagai respons 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

Ini akan berfungsi pada halaman admin.

Untuk menambahkan editor wp baru ke wadah oleh JS AJAX:

1) Buat fungsi wp_ajax di functions.php untuk mengembalikan wp_editor

2) Buat skrip jQuery untuk meminta editor teks baru dan menambahkannya ke wadah, untuk kasus ini, ketika menekan tombol

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

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

Panggilan skrip enqueue:

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