У мене є тема, яка розроблена на замовлення і справді складна. Одне з моїх речей - це декілька областей вмісту, де користувачі можуть вказувати вміст для певних вкладок. Я завантажую декілька примірників редактора WordPress через wp_editor()функцію. Це прекрасно працює. (Це все на стороні адміністратора, у публікації типу "Сторінка")

Однак я почав робити декілька вдосконалень, серед яких можливість динамічно додавати / видаляти вкладки (раніше я завантажував 6 редакторів на сторінку). У користувачів може бути 1-7 вкладок.

Коли користувачі додають вкладку, їй потрібно додати примірник редактора на сторінку. Однак, що б я не намагався, я не можу змусити його завантажуватись та відображатись правильно.

Ось дві речі, які я спробував поки що:

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

Отже, питання полягає в тому, чи комусь пощастило додавати редакторів через дзвінки AJAX? Будь-яка порада?

Щоб відобразити ярлики швидкого доступу, вам потрібно повторно встановити їх у своєму неповному обробнику ajax.

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(також примітка, ідентифікатор 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;
});

тепер на панелі інструментів виконайте цю функцію (зверніть увагу, використовуючи 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
  });
};

Потім зателефонуйте на свою функцію після аяксу, наприклад:

$('#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 у function.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 (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');