Pertanyaan memuat wordpress wp_editor secara dinamis (ajax)


Ini adalah jawaban / solusi daripada pertanyaan, masih mungkin ada beberapa bug, bahkan saya mencoba di env dev saya.

Saya baru-baru mencoba menggunakan wp_editor di widget / menu, setelah beberapa pencarian, saya tidak menemukan solusi lengkap yang saya inginkan.

Saya akan berbagi solusi saya di bawah setelah saya menggali kode wp dengan jam:


4
2018-02-03 03:41


asal


Jawaban:


Mungkin ada peretasan yang terlibat, namun, saya berusaha meminimalkannya.

Untuk membuat wp_editor dapat bekerja dalam html dinamis (yang artinya tanpa halaman isi ulang, js mengubah struktur halaman), ada dua masalah utama yang harus diperhatikan:

  1. tinymce
  2. qucik-tags

Untuk [tinymce]:

Sebuah. perlu mengatur ulang UI dengan benar

  • solusinya adalah [hapus contoh mce] -> [dapatkan pengaturan mce yang tepat] -> [re-init instance mce baru]

  • dalam kode js (id berarti id textarea):

    tinymce.execCommand('mceRemoveEditor', true, id);
    var init = tinymce.extend( {}, tinyMCEPreInit.mceInit[ id ] );
    try { tinymce.init( init ); } catch(e){}
    

b. perlu data untuk menulis kembali ke textarea sebelum mengirimkan

  • solusinya adalah [bind click to button] -> pada submt :: [matikan mce] -> [nyalakan submit]
  • dalam kode js:

    jq('textarea[id="' + id + '"]').closest('form').find('input[type="submit"]').click(function(){
        if( getUserSetting( 'editor' ) == 'tmce' ){
            var id = mce.find( 'textarea' ).attr( 'id' );
            tinymce.execCommand( 'mceRemoveEditor', false, id );
            tinymce.execCommand( 'mceAddEditor', false, id );
        }
        return true;
    });
    

Untuk [Tag Cepat]:

Sebuah. Tag re-init

  • [Dapatkan pengaturan] -> [setup mouse event] -> [re-init QTags]

b. Beralih ke tab yang benar (tab mce atau tab tag cepat)

  • [beralih ke mode tab saat ini]

  • keduanya di atas dalam kode js:

    if ( typeof(QTags) == 'function' ) {
        jq( '[id="wp-' + id + '-wrap"]' ).unbind( 'onmousedown' );
        jq( '[id="wp-' + id + '-wrap"]' ).bind( 'onmousedown', function(){
            wpActiveEditor = id;
        });
        QTags( tinyMCEPreInit.qtInit[ id ] );
        QTags._buttonsInit();
        switchEditors.switchto( jq( 'textarea[id="' + id + '"]' ).closest( '.widget-mce' ).find( '.wp-switch-editor.switch-' + ( getUserSetting( 'editor' ) == 'html' ? 'html' : 'tmce' ) )[0] );
    }
    

Juga, ingatlah jika Anda menggunakan ajax, setiap kali posting kembali UI mce, Anda perlu melakukan ulang [reset mce UI] dan [Qtags] di dalam Anda js. Solusi mudah adalah menggunakan kode js di posting Anda kembali html, dan mendeteksi dalam php:

$isAjax = defined( 'DOING_AJAX' ) && DOING_AJAX == true );

Tentang pengaturan default dalam nilai js:

  1. mce: tinyMCEPreInit.mceInit

  2. qtag: tinyMCEPreInit.qtInit

Jika Anda mencoba menggunakan pengaturan default untuk mode widget, Anda perlu mencari pengaturan default.

Untuk mendapatkan id template widget, di kode js:

function getTemplateWidgetId( id ){
        var form = jQuery( 'textarea[id="' + id + '"]' ).closest( 'form' );
        var id_base = form.find( 'input[name="id_base"]' ).val();
        var widget_id = form.find( 'input[name="widget-id"]' ).val();
        return id.replace( widget_id, id_base + '-__i__' );
}

Jadi Anda bisa mendapatkan pengaturan dengan:

  1. untuk mce:

    var init;
    if( typeof tinyMCEPreInit.mceInit[ id ] == 'undefined' ){
        init = tinyMCEPreInit.mceInit[ id ] = tinymce.extend( {}, tinyMCEPreInit.mceInit[ getTemplateWidgetId( id ) ] );
    }else{
        init = tinyMCEPreInit.mceInit[ id ];
    }
    
  2. Untuk Qtag:

    var qInit;
    if( typeof tinyMCEPreInit.qtInit[ id ] == 'undefined' ){
        qInit = tinyMCEPreInit.qtInit[ id ] = jq.extend( {}, tinyMCEPreInit.qtInit[ getTemplateWidgetId( id ) ] );
        qInit['id'] = id;
    }else{
        qInit = tinyMCEPreInit.qtInit[ id ];
    }
    

Untuk contoh kode lengkap, silakan periksa: https://github.com/hezachary/wordpress-wysiwyg-widget/blob/master/widget_wp_editor.class.php

Jika ada yang ingin menggunakan wp_editor di menu berjalan untuk admin, prinsipnya harus sama.

Jika Anda memiliki pertanyaan atau solut yang lebih baik, silakan komentar, terima kasih.


7
2018-02-03 03:41



Solusi kerja:

p.s. Anda akan bertanya di WP.SE: https://wordpress.stackexchange.com/a/192132/33667


tambahkan aksi di wordpress, katakanlah My_Action_Name (Juga perhatikan, ID textarea 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 (perhatikan, menggunakan My_TextAreaID_22 dan My_Action_Name):

function start_Ajax_request() { 
    Alert("I have started");
    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){ 
            Alert("I have Finished");
            tinymce.init(My_New_Global_Settings); 
            tinyMCE.execCommand('mceAddEditor', false, "My_TextAreaID_22"); 
            quicktags({id : "My_TextAreaID_22"});
        }
    );

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

4
2017-08-15 16:09



Saya menghadapi masalah serupa. Saya memecahkan masalah dengan menggunakan yang berikut
1. Ditambahkan filter berikut untuk membuka editor selalu dalam mode visual di halaman utama

add_filter( 'wp_default_editor', create_function('', 'return "tinymce";') );



2. Dalam konten Ajax yang digunakan berikut untuk editor

wp_editor( $content, "editor_ajax", array('textarea_name'=>"content_ajax",'quicktags' => array('buttons' => 'strong,em,link,block,del,ins,img,ul,ol,li,code,close')));



3. Dalam konten Ajax ditambahkan mengikuti kode JS

<script src="<?php bloginfo('home')?>/wp-includes/js/quicktags.min.js"</script>
<script>
jQuery(document).ready(function(){

    ed_id =  "editor_ajax";
    quicktags({id : ed_id,buttons:"strong,em,link,block,del,ins,img,ul,ol,li,code,more,close,dfw"});
    tinyMCE.execCommand('mceAddEditor', false, fullId); 

});
</script>

1
2017-09-20 18:13