Cara memuat wp_editor () melalui AJAX / jQuery

22

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?

Aaron Wagner
sumber
apakah Anda mencoba melakukan panggilan ajax via admin-ajax.php? Jika tidak ada fungsi dengan kode Anda kemudian panggil melaluiadmin-ajax.php
Sisir
Apakah saran ini membantu? Jika demikian, ini bukan pertanyaan WordPress. :)
fuxia
@Sisir, Jika saya membaca saran Anda dengan benar, maka itu tidak berhasil. Saya menggunakan ini untuk memanggil formulir Ajax: $('#sph-tabs-section-tab'+newTab).load('/wp-admin/admin-ajax.php?action=sph_add_editor');dan kemudian menambahkan fungsi yang mengembalikan wp_editor(). Itu dipanggil tanpa masalah, tetapi masih hanya mengembalikan editor tanpa tombol. (hasil yang sama persis seperti item 1 di OP)
Aaron Wagner
Setelah diinisialisasi TinyMCE tidak dapat dipindahkan di DOM. Anda harus menghapusnya, pindah DOM dan menginisialisasi lagi. Kode serupa tetapi untuk komentar frontend di sini di blog saya: techytalk.info/... Formulir komentar dipindahkan ketika pengguna mengklik membalas / membatalkan balasan.

Jawaban:

7

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.

Dale Sattler
sumber
4

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.

Goran Jakovljevic
sumber
1
tinymce adalah sumber daya eksternal, jadi saya pikir mereka mungkin berpikir dokumen tinymce sendiri menutupinya - tinymce.com/docs - tetapi contohnya sangat buruk ... Anda juga harus memasukkan skrip tincemce agar jawaban ini berfungsi! (Cara paling sederhana adalah dengan mengeluarkan satu dummy PHP wp_editor()dengan tinymcearg disetel ke true:-)
jave.web
terima kasih sobat ... ini bekerja untuk saya juga - setelah mengembalikan data dari ajax saya baru saja menginisialisasi itu ...;)
Sagive SEO
3

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
T.Todua
sumber
2

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();
Shahar
sumber
2
Tolong jelaskan bagaimana cara kerjanya? Ini tidak bekerja. Saya mencobanya.
Ahmed Fouad
Setelah menambahkan konten ajax yang berisi textarea saya ingin tinyMCE di ( response), panggil fungsi tinymce_textareas yang menginisialisasi tinyMCE pada textareas baru.
shahar
1

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

bueltge
sumber
Ini membutuhkan perpustakaan untuk digunakan - T5 ... bukan solusi WP-satunya
cale_b
0

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 .

Dileep Kumar Awasthi
sumber
Silakan bagikan inti bagaimana kode ini dapat membantu, dan kemudian tambahkan tautan untuk perincian lebih lanjut. Jawaban hanya tautan menjadi tidak valid jika tautan rusak - Saya harap Anda mengerti. :)
Mayeenul Islam
Tautan itu rusak sekarang dan saya tidak memiliki konteks apa pun di balik jawabannya. (Salah satu dari banyak alasan mengapa jawaban "hanya tautan" buruk)
Sudar
Ini berfungsi tetapi memiliki beberapa masalah, ketika Anda memilih teks atau visual itu membuat area teks duplikat dalam editor
Johan Pretorius
0

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.

  1. 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

Tim Matz
sumber
0

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');
Isaac Levi Felix Salinas
sumber