Tôi có một chủ đề được phát triển tùy chỉnh và thực sự phức tạp. Một trong những điều tôi có là nhiều khu vực nội dung nơi người dùng có thể chỉ định nội dung cho các tab cụ thể. Tôi tải nhiều phiên bản của trình soạn thảo WordPress thông qua wp_editor()chức năng. Nó hoạt động hoàn hảo. (Đây là tất cả về phía quản trị viên, trong loại bài đăng "Trang")

Tuy nhiên, tôi đã bắt đầu thực hiện một vài cải tiến, bao gồm khả năng thêm / xóa các tab một cách linh hoạt (trước đây, tôi đã tải 6 trình chỉnh sửa trên trang). Người dùng có thể có 1-7 tab.

Khi người dùng thêm một tab, nó cần thêm một phiên bản của trình soạn thảo vào trang. Tuy nhiên, bất kể tôi cố gắng gì, tôi không thể tải nó và hiển thị chính xác.

Đây là 2 điều mà tôi đã thử cho đến nay:

1. Tạo một tệp php có bootstrap quản trị viên đi kèm, sau đó tải trình soạn thảo với wp_editor(). Sau đó, tôi thực hiện một jQuery $.loadđể gọi trang và đưa HTML kết quả vào khu vực mà nó cần hiển thị. Tuy nhiên, điều này không thực sự hoạt động khi các nút định dạng của trình chỉnh sửa biến mất (đáng chú ý là việc kéo trang trực tiếp lên, trình chỉnh sửa hiển thị và hoạt động hoàn hảo)
2. Đã tải trình soạn thảo trên trang, bên trong một div ẩn và sau đó khi một tab được thêm vào, hãy sử dụng jquery để di chuyển nó vào vị trí. Thao tác này sẽ tải trình soạn thảo một cách khéo léo, nhưng bạn không thể sử dụng bất kỳ nút chỉnh sửa nào (chúng hiển thị nhưng không làm gì cả) và bạn không thể đặt con trỏ vào vùng văn bản (tuy nhiên, tò mò rằng chuyển sang chế độ HTML cho phép gõ và một số tương tác với các nút chế độ HTML)

Vì vậy, câu hỏi là, có ai có may mắn thêm các biên tập viên thông qua các cuộc gọi AJAX không? Có lời khuyên nào không?

Để có được quicktags xuất hiện, bạn cần phải khởi tạo lại chúng trong trình xử lý ajax oncomplete của bạn.

quicktags({id : 'editorcontentid'});

Trình xử lý thành công ajax của tôi trông như thế này;

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

Tôi đã quản lý để tải trình soạn thảo bằng cách trước tiên gọi một hàm tĩnh tạo trình soạn thảo và lưu trữ nó dưới dạng biến. Tôi chạy phương thức tạo trình soạn thảo trên init. Điều này dường như để có được wordpress để enque tất cả các kịch bản cần thiết.

Điều quan trọng là khi bạn tạo phiên bản trình soạn thảo của mình, bạn đặt nó để sử dụng tinymce, theo cách đó, tệp js tinymce cũng được yêu cầu.

Sau khi vật lộn với nó, tìm thấy giải pháp hoạt động, trong một cuộc gọi lại sau khi bạn thêm phần tử mới:

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

Thật kỳ lạ khi không có tài liệu nào bên trong codex.

Cuối cùng, giải pháp làm việc:

thêm hành động trong wordpress, giả sử My_Action_Name(cũng lưu ý, 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;
});

bây giờ, trong Bảng điều khiển, thực hiện chức năng này (lưu ý, sử dụng My_TextAreaID_22và 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

Bạn cần gọi lại trình soạn thảo init một lần nữa khi bạn thêm văn bản ajax của bạn, tôi đã làm như thế này:

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

Sau đó gọi hàm của bạn sau ajax của bạn, như thế này:

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

Giải pháp có thể sử dụng từ @toscho trên github . Anh ấy xây dựng kết quả tốt đẹp này cho một câu hỏi ở đây, xem câu trả lời của anh ấy để biết thêm chi tiết.

Sử dụng mã này, hy vọng nó sẽ giúp:

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

Chi tiết hơn có thể được tìm thấy ở đây .

Tôi đã quản lý nó theo cách này:

1. Trước tiên, bạn cần gọi wp_editor tại trang chính, nơi bạn gọi ajax. Nhưng bạn phải gói nó trong div ẩn:

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

Id phải là rundom và duy nhất. Cài đặt phải giống với cài đặt trong trình chỉnh sửa ajax của bạn.

2. Thứ hai bạn cần gọi điều này trong phản hồi 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

Điều này sẽ làm việc trên các trang quản trị.

Để nối một trình soạn thảo wp mới vào một thùng chứa bằng JS AJAX:

1) Tạo hàm wp_ajax trong hàm.php để trả về wp_editor

2) Tạo tập lệnh jQuery để yêu cầu trình soạn thảo văn bản mới và nối nó vào bộ chứa, trong trường hợp này, khi nhấn nút

Tệp 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');

Tập lệnh 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});
    });
}
});

Kịch bản Enqueue gọi:

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