Özel olarak geliştirilmiş ve gerçekten karmaşık bir temam var. Sahip olduğum şeylerden biri, kullanıcıların belirli sekmeler için içerik belirtebilecekleri birden çok içerik alanı. wp_editor()İşlev aracılığıyla WordPress düzenleyicisinin birden fazla örneğini yüklerim . Mükemmel çalışıyor. (Bunların hepsi yönetici tarafında, "Sayfa" yazı tipinde)

Ancak, dinamik olarak sekme ekleme / kaldırma yeteneği de dahil olmak üzere birkaç geliştirme yapmaya başladım (daha önce sayfaya 6 editör yükledim). Kullanıcıların 1-7 sekmeleri olabilir.

Kullanıcılar bir sekme eklediklerinde, sayfaya editörün bir örneğini eklemesi gerekir. Ancak ne denersem deneyeyim, doğru yüklenip görüntüleyemiyorum.

Şimdiye kadar denediğim 2 şey:

1. Admin bootstrap'ın dahil olduğu bir php dosyası oluşturun ve sonra editörü ile yükleyin wp_editor(). Daha sonra $.loadsayfayı çağırmak için bir jQuery yapıyorum ve sonuçta ortaya çıkan HTML'yi göstermesi gereken alana dahil ediyorum . Ancak bu gerçekten de işe yaramaz, ancak düğme biçimlendirme editörleri kaybolduğu için (sayfayı doğrudan yukarı çeken düzenleyicinin mükemmel şekilde görüntülendiği ve işlev gördüğü dikkat çekicidir)
2. Düzenleyiciyi sayfaya, gizli bir div içine yükledikten sonra bir sekme eklendiğinde, yerine taşımak için jquery kullanın. Bu editörü inceliğe yükler, ancak editör düğmelerinden hiçbirini kullanamazsınız (ekrana gelirler, fakat hiçbir şey yapmazlar) ve imleci metin alanına koyamazsınız (meraklı, ancak HTML moduna geçme HTML modu düğmeleriyle yazmaya ve bazı etkileşimlere izin verir)

Yani soru şu ki, AJAX çağrıları aracılığıyla editör ekleyen birileri oldu mu? Herhangi bir tavsiye?

Çabuk etiketlerin görünmesini sağlamak için, bunları tam bir tamamlayıcı işleyicinizde yeniden başlatmanız gerekir.

quicktags({id : 'editorcontentid'});

Ajax başarı işleyicim şöyle görünüyor;

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

Editörün, önce editörü yaratan ve değişken olarak önbelleğe alan statik bir işlev çağırarak yüklenmesini sağladım. Editör oluşturma yöntemini init'te çalıştırıyorum. Bu gerekli tüm komut dosyalarını kodlamak için wordpress olsun gibi görünüyor.

Editörünüzün örneğini oluşturduğunuzda, onu tinymce kullanmaya ayarlamanız önemlidir, bu şekilde tinymce js dosyası da aranır.

Bununla mücadele ettikten sonra, yeni eleman ekledikten sonra bir geri çağırmada çalışan çözümü bulundu:

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

Kodeks içinde sıfır dokümantasyon bulunması garip.

Sonunda, çalışma çözümü:

wordpress'e eylem ekleyin, diyelim My_Action_Name(not edin, textarea kimliği 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;
});

Şimdi, Dashboard'da bu işlevi yürütün (not, kullanma My_TextAreaID_22ve 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

Ajax textarea'inizi ekledikten sonra editör init'i tekrar çağırmanız gerekir, şöyle yaptım:

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

Ardından, ajax'ınızdan sonra fonksiyonunuzu şöyle arayın:

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

İlgili @toscho gelen kullanılabilir çözelti github . Bu güzel sonucu da burada bir soru için oluşturuyor, daha fazla ayrıntı için cevabına bakınız.

Bu kodu kullanın, yardımcı olacağını umalım:

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

Daha fazla ayrıntı burada bulunabilir .

Bunu bu şekilde idare ettim:

1. Öncelikle ana sayfada wp_editor'u çağırmanız gerekir, burada ajax'ı arayın. Ama onu gizli div'ye sarmalısın:

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

Id rundom ve benzersiz olmalı. Ayarlar, ajax editörünüzdeki ayarlarla aynı olmalıdır.

2. İkincisi, bunu ajax cevabında çağırmalısınız:

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

Bu yönetici sayfalarında çalışacak.

JS AJAX'in bir konteynere yeni bir wp editörü eklemek için:

1) wp_editor işlevini döndürmek için functions.php dosyasında bir wp_ajax işlevi oluşturun

2) Yeni bir metin editörü istemek ve bir konteynere eklemek için bir jQuery betiği oluşturun, bu durumda, bir düğmeye basarken

PHP Dosyası

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 Komut Dosyası (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});
    });
}
});

Script çağrısı yapma:

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