Mam motyw opracowany na zamówienie i naprawdę złożony. Jedną z rzeczy, które mam, jest wiele obszarów zawartości, w których użytkownicy mogą określać zawartość dla określonych kart. Ładuję wiele wystąpień edytora WordPress przez wp_editor()funkcję. Działa idealnie. (To wszystko po stronie administratora, w typie posta „Strona”)

Zacząłem jednak wprowadzać kilka ulepszeń, w tym możliwość dynamicznego dodawania / usuwania kart (wcześniej załadowałem 6 edytorów na stronie). Użytkownicy mogą mieć 1-7 kart.

Gdy użytkownicy dodają kartę, musi ona dodać instancję edytora do strony. Jednak bez względu na to, co próbuję, nie mogę go poprawnie załadować i wyświetlić.

Oto 2 rzeczy, których do tej pory próbowałem:

1. Utwórz plik php, który zawiera bootstrap administratora, a następnie załaduj edytor wp_editor(). Następnie wykonuję jQuery, $.loadaby wywołać stronę i dołączyć wynikowy kod HTML w obszarze, który musi wyświetlić. Nie działa to jednak tak naprawdę, ponieważ znikają przyciski formatowania edytorów (warto zauważyć, że podciągając stronę bezpośrednio w górę, edytor wyświetla i działa idealnie)
2. Załadowałem edytor na stronę, w ukrytym div, a następnie po dodaniu karty użyj jquery, aby przenieść ją na miejsce. To ładuje takt edytora, ale nie możesz użyć żadnego z przycisków edytora (wyświetlają się, ale nic nie robią), i nie możesz umieścić kursora w polu tekstowym (ciekawe, że przejście do trybu HTML umożliwia pisanie i interakcję z przyciskami trybu HTML)

Pytanie brzmi, czy ktoś miał szczęście dodając redaktorów za pośrednictwem połączeń AJAX? Jakakolwiek rada?

Aby pojawiły się szybkie tagi, musisz utworzyć je ponownie w ramach swojego programu obsługi onkompletnej ajax.

quicktags({id : 'editorcontentid'});

Mój moduł obsługi sukcesu ajax wygląda następująco;

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

Udało mi się załadować edytor, wywołując najpierw funkcję statyczną, która tworzy edytor i buforuje go jako zmienną. Uruchamiam metodę tworzenia edytora przy init. Wydaje się, że Wordpress uruchamia wszystkie wymagane skrypty.

Ważne jest, aby podczas tworzenia instancji edytora ustawić tak, aby korzystała z tinymce, tak by plik js tinymce był również zapisywany w pliku.

Po zmaganiu się z nim znalazłem rozwiązanie, które działa, w wywołaniu zwrotnym po dodaniu nowego elementu:

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

Dziwne, że w kodzie nie ma żadnej dokumentacji.

Wreszcie działające rozwiązanie:

dodaj akcję w wordpress, powiedzmy My_Action_Name(także uwaga, identyfikator 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;
});

teraz, w Dashboard, uruchom tę funkcję (uwaga, użycie My_TextAreaID_22i 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

Musisz ponownie wywołać edytora init po dodaniu swojego obszaru tekstowego ajax, zrobiłem to tak:

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

Następnie wywołaj swoją funkcję po swojej ajax, w ten sposób:

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

Użyteczne rozwiązanie z @toscho na github . Buduje ten miły wynik również na pytanie tutaj, zobacz jego odpowiedź, aby uzyskać więcej informacji.

Użyj tego kodu, mam nadzieję, że pomoże:

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

Więcej szczegółów można znaleźć tutaj .

Udało mi się to w ten sposób:

1. Najpierw musisz wywołać wp_editor na stronie głównej, skąd wywołujesz ajax. Ale musisz owinąć go w ukryty div:

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

Identyfikator musi być rzadki i niepowtarzalny. Ustawienia muszą być takie same jak ustawienia w edytorze ajax.

2. Po drugie, musisz wywołać to w odpowiedzi 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

Działa to na stronach administracyjnych.

Aby dodać nowy edytor wp do kontenera JS AJAX:

1) Utwórz funkcję wp_ajax w functions.php, aby zwrócić wp_editor

2) Utwórz skrypt jQuery, aby poprosić o nowy edytor tekstu i dołącz go do kontenera, w tym przypadku po naciśnięciu przycisku

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

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

Kolejkuj wywołania skryptów:

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