사용자 정의 개발되고 정말 복잡한 테마가 있습니다. 내가 가진 것 중 하나는 사용자가 특정 탭에 대한 콘텐츠를 지정할 수있는 여러 콘텐츠 영역입니다. wp_editor()함수를 통해 WordPress 편집기의 여러 인스턴스를로드 합니다. 완벽하게 작동합니다. (이것은 모두 관리 페이지의 "페이지"게시물 유형에 있습니다)

그러나 탭을 동적으로 추가 / 제거하는 기능을 포함하여 몇 가지 개선을 시작했습니다 (이전에 페이지에 6 명의 편집자를로드했습니다). 1-7 개의 탭이있을 수 있습니다.

사용자가 탭을 추가 할 때 편집기 인스턴스를 페이지에 추가해야합니다. 그러나 무엇을 시도해도 올바르게로드하고 표시 할 수 없습니다.

지금까지 시도한 두 가지 사항은 다음과 같습니다.

1. 관리자 부트 스트랩이 포함 된 PHP 파일을 생성 한 다음로 편집기를로드하십시오 wp_editor(). 그런 다음 jQuery $.load를 수행 하여 페이지를 호출하고 표시해야 할 영역에 결과 HTML을 포함시킵니다. 그러나 편집기 서식 버튼이 사라지면 실제로 작동하지 않습니다 (페이지를 직접 올리면 편집기가 표시되고 완벽하게 작동한다는 점)
2. 페이지의 숨겨진 div 내부에 편집기를로드 한 다음 탭이 추가되면 jquery를 사용하여 제자리로 이동하십시오. 이렇게하면 편집기가 그대로로드되지만 편집기 버튼을 사용할 수 없으며 (표시하지만 아무것도하지 않음) 커서를 텍스트 영역에 넣을 수 없습니다 (단, HTML 모드로 전환하는 것이 궁금합니다) 입력 및 HTML 모드 버튼과의 상호 작용 허용)

문제는 AJAX 호출을 통해 편집자를 추가하는 사람이 있습니까? 어떤 충고?

빠른 태그를 표시하려면 ajax oncomplete 핸들러 내에서 빠른 태그를 인스턴스화해야합니다.

quicktags({id : 'editorcontentid'});

내 아약스 성공 처리기는 다음과 같습니다.

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에서 에디터 생성 방법을 실행합니다. 이것은 필요한 모든 스크립트를 대기열에 넣는 워드 프레스를 얻는 것처럼 보입니다.

에디터 인스턴스를 생성 할 때 tinymce를 사용하도록 설정하고 tinymce js 파일도 대기열에 포함시키는 것이 중요합니다.

그것에 어려움을 겪고 나서 새로운 요소를 추가 한 후 콜백에서 작동하는 솔루션을 찾았습니다.

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

코덱 내부에 문서가 없다는 것이 이상합니다.

마지막으로 작업 솔루션 :

워드 프레스에서 작업을 추가하고 말할 수 있습니다 My_Action_Name(textarea 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;
});

이제, 대시 보드 (중 사용이 주 기능을 수행 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

ajax textarea를 추가하면 편집기를 다시 init로 호출해야합니다.

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

그런 다음 아약스 다음과 같이 함수를 호출하십시오.

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

github의 @toscho에서 사용 가능한 솔루션입니다 . 그는 여기에 대한 질문에 대해서도이 좋은 결과를 얻 습니다. 자세한 내용 은 답변 을 참조하십시오.

이 코드를 사용하면 도움이되기를 바랍니다.

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>

ID는 런덤이어야하며 고유해야합니다. 설정은 ajax 편집기의 설정과 같아야합니다.

2. 두 번째로 아약스 응답에서 이것을 호출해야합니다.

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

이것은 관리 페이지에서 작동합니다.

JS AJAX가 컨테이너에 새 wp 편집기를 추가하려면 다음을 수행하십시오.

1) functions.php에 wp_ajax 함수를 만들어 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');