У меня есть тема, которая специально разработана и действительно сложна. Одна из вещей, которые у меня есть, это несколько областей контента, где пользователи могут указывать контент для определенных вкладок. Я загружаю несколько экземпляров редактора WordPress через wp_editor()функцию. Работает отлично. (Это все на стороне администратора, в типе поста "Страница")

Однако я начал вносить некоторые улучшения, в том числе возможность динамически добавлять / удалять вкладки (раньше я загружал 6 редакторов на странице). Пользователи могут иметь 1-7 вкладок.

Когда пользователи добавляют вкладку, она должна добавить экземпляр редактора на страницу. Однако, что бы я ни пытался, я не могу заставить его загружаться и отображаться правильно.

Вот две вещи, которые я пробовал до сих пор:

1. Создайте php-файл с включенной начальной загрузкой администратора, а затем загрузите редактор с помощью wp_editor(). Затем я делаю jQuery $.loadдля вызова страницы и включаю полученный HTML-код в область, которая должна отображаться. Однако это не работает, так как кнопки форматирования редакторов исчезают (стоит отметить, что при перетягивании страницы вверх редактор отображается и работает отлично)
2. Загрузите редактор на странице, внутри скрытого элемента div, а затем, после добавления вкладки, используйте jquery, чтобы переместить ее на место. Это загружает редактор в такт, но вы не можете использовать любую из кнопок редактора (они отображаются, но ничего не делают), и вы не можете поместить курсор в текстовую область (любопытно, однако, что переход в режим HTML позволяет печатать и немного взаимодействовать с кнопками режима HTML)

Итак, вопрос в том, кому-нибудь повезло, добавив редакторов через вызовы AJAX? Любой совет?

Чтобы отобразить ярлыки быстрого доступа, вам необходимо создать их экземпляр в обработчике ajax oncomplete.

quicktags({id : 'editorcontentid'});

Мой обработчик успеха ajax выглядит так;

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

Мне удалось заставить редактор загружаться, сначала вызвав статическую функцию, которая создает редактор и кэширует его как переменную. Я запускаю метод создания редактора на init. Похоже, что WordPress включает все необходимые скрипты.

Важно, чтобы при создании вашего экземпляра редактора, чтобы вы установили его на использование tinymce, таким образом также заполнялся файл tinymce js.

После борьбы с этим, нашел решение, которое работает, в обратном вызове после добавления нового элемента:

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

Странно, что внутри кодекса нет документации.

Наконец, рабочее решение:

добавить действие в WordPress, скажем My_Action_Name(также обратите внимание, текстовое ID 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;
});

Теперь, в Dashboard, выполните эту функцию (обратите внимание, с использованием My_TextAreaID_22и 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

Вам нужно снова вызвать редактор init после добавления вашего ajax textarea, я сделал это так:

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

Затем вызовите вашу функцию после вашего AJAX, например так:

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

Полезное решение от @toscho на github . Он построил этот хороший результат и для вопроса здесь, см. Его ответ для более подробной информации.

Используйте этот код, надеюсь, он поможет:

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

Более подробную информацию можно найти здесь .

Мне это удалось:

1. Для начала вам нужно вызвать wp_editor на главной странице, откуда вы вызываете ajax. Но вы должны обернуть его в скрытый div:

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

Идентификатор должен быть случайным и уникальным. Настройки должны совпадать с настройками в вашем редакторе ajax.

2. Во-вторых, вам нужно вызвать это в ответ 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

Это будет работать на страницах администратора.

Чтобы добавить новый wp-редактор в контейнер с помощью JS AJAX:

1) Создайте функцию wp_ajax в functions.php для возврата wp_editor

2) Создайте скрипт jQuery для запроса нового текстового редактора и добавьте его в контейнер, для этого случая, при нажатии кнопки

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

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

Сценарии постановки вызова:

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