맞춤형 게시물 유형으로 N 개의 WYSIWYG 편집기를 얻는 방법이 있습니까?

맞춤 게시물 유형에 대해 여러 개의 WYSIWYG 편집기를 사용하는 방법이 있습니까? 예를 들어 열 레이아웃이 2 개인 경우 한 열에 대해 하나의 편집기를 만들고 다른 열에 대해 다른 편집기를 원했습니다.

사용자 정의 게시물 유형이라고 가정 Properties하면 다음과 유사한 코드를 사용하여 tinyMCE 편집기를 추가 할 수있는 상자를 추가합니다.

function register_meta_boxen() {
    add_meta_box("wysiwyg-editor-2", "Second Column", "second_column_box",
    "properties", "normal", "high");    
}
add_action('admin_menu', 'register_meta_boxen');

wysiwyg-editor-2메타 상자에 적용 할 ID, 메타 상자에 부여 할 Second Column제목, 메타 상자에 second_column_box대한 HTML을 인쇄하는 기능, properties사용자 정의 게시물 유형, normal메타 상자의 위치 이며 high가능한 한 페이지에서 높게 표시되도록 지정합니다. (일반적으로 기본 tinyMCE 편집기 아래).

그런 다음 이것을 가장 기본적인 예로 사용하여 tinyMCE 편집기를 텍스트 영역에 연결해야합니다. second_column_box메타 박스의 HTML을 인쇄하는 함수 를 정의 해야 하므로이 작업을 수행하는 것이 좋습니다.

function second_column_box() {
    echo <<<EOT
    <script type="text/javascript">
jQuery(document).ready(function() {
    jQuery("#tinymce").addClass("mceEditor");
    if ( typeof( tinyMCE ) == "object" &&
         typeof( tinyMCE.execCommand ) == "function" ) {
        tinyMCE.execCommand("mceAddControl", false, "tinymce");
    }
});
</script>
    <textarea id="tinymce" name="tinymce"></textarea>
EOT;
}

극복해야 할 방법이 확실하지 않은 몇 가지 문제가 있습니다. tinyMCE 편집기는 메타 박스 안에 중첩되어 이상적이지 않을 수 있으며 HTML 및 Visual 편집 모드와 일반 포스트 편집기의 미디어 삽입 명령 사이를 전환하는 기능은 제공하지 않습니다. 모드 전환은 첫 번째 인수가 ID 인 함수로 정의 된 것으로 보이지만 wp-tinymce 스크립트로 코딩 된 것으로 보입니다. 내장 된 tinyMCE 함수를 사용하여이를 수행 할 수 있지만 WP HTML 삽입 단추없이 전체 tinyMCE와 기본 텍스트 영역 사이에서 텍스트 영역을 변경합니다.

첫째 : 큰 덕분 에 @Thomas 맥도날드 에 대한 그의 대답 ; @Paul Sheldrake가 요청한 것과 동일한 질문을 정확히 찾아야 했고 Thomas의 코드가 올바른 방향으로 시작했습니다.

불행히도 측면 메타 박스에서 TinyMCE를 사용해야 했기 때문에 레이아웃을 기본 에서 더 간단하고 작은 레이아웃 으로 변경해야 했기 때문에 중단되었습니다. 나는 실제로 MoxieCode TinyMCE Wiki 와 TinyMCE Tips & How To Forum 에서 해결책을 찾기 위해 거의 모든 곳을 보았지만 아무것도 발견하지 못했습니다! ⁽¹⁾ 모든 나는 어떻게 설정에 설명 발견 theme, width, height사용 등 tinyMCE.init({...})하지만 분명히 당신은 당신이 사용하는 경우 사용할 수 없습니다 tinyMCE.execCommand("mceAddControl").

Hamilton Chua의 한 페이지에서 여러 TinyMCE 3 인스턴스 기사를 살펴 보았을 때 충격을 받았습니다 . 그의 해결책은을 호출하기 전에 할당하는 것이 었습니다 .tinyMCE.settingstinyMCE.execCommand("mceAddControl")

<?php 
$id = "sidebar-content";
$script = <<<EOT
<script type="text/javascript">
jQuery(document).ready(function($) {
    $("#{$id}").addClass("mceEditor");
    if ( typeof( tinyMCE ) == "object" &&
         typeof( tinyMCE.execCommand ) == "function" ) {
      tinyMCE.settings = {
        theme : "advanced",
        mode : "none",
        language : "en",
        height:"200",
        width:"100%",
        theme_advanced_layout_manager : "SimpleLayout",
        theme_advanced_toolbar_location : "top",
        theme_advanced_toolbar_align : "left",
        theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull",
        theme_advanced_buttons2 : "",
        theme_advanced_buttons3 : ""
      };
      tinyMCE.execCommand("mceAddControl", true, "{$id}");
    }
});
</script>
<textarea id="sidebar-content" name="sidebar-content"></textarea>
EOT;

슬픈 부분은 이것이 실제로 어렵지는 않지만 내가 찾을 수있는 다른 곳에서는 문서화되지 않았다는 것입니다. 다른 사람이이 문제를 경험 한 사람이 거의 없음을 알게되면 놀랍습니다.

어쨌든 위의 코드는 클라이언트가 필요로하는 형식 / 레이아웃으로 다음 두 번째 TinyMCE를 생성했습니다.

_{(출처 : mikeschinkel.com )}

따라서 위의 @Thomas McDonald 코드를 사용하는 경우 Hamilton Chua의 멋진 기사 (Ham 감사 합니다)를 확인하기 위해 레이아웃을 수정해야 할 필요가 있음을 발견했습니다 .

• 한 페이지에 여러 TinyMCE 3 인스턴스

추신 : 약간의 잘못이라도 TinyMCE가 전혀 보이지 않을 수도 있습니다. 예를 들어, 제 경우theme: "simple"에는 처음에사용했는데 아무 것도 얻지 못했고 방금 사용해야한다는 것을 깨닫기 위해 한 시간이 걸렸습니다theme: "advanced". 따라서 TinyMCE가 작동하지 않는 것을 발견하면 주변 환경을 바꿔보십시오. 비슷한 문제가있을 수 있습니다. (BTW, 다른 테마를 시도하지 않았거나 다른 테마를 탐색하지 않았습니다. 작동하는 다른 테마를 찾으면 아래에 의견을 남겨주십시오.)

각주

1 : 매우 실망 스럽다! WordPress Answer로 한 달이 조금 넘는 시간이 지난 지금 나는 여기에서와 같은 수준의 품질로 모든 질문에 대한 답을 찾을 것으로 기대하고 있습니다.

이 기사를 Google의 첫 번째 결과로 찾았으므로 WP는 이제 이러한 종류의 작업을 처리하는 기능을 제공한다고 언급하고 싶었습니다.

add_meta_box함수 내에서 다음 코드를 추가하십시오->

wp_editor( $content, $editor_id, $settings = array() );

TinyMCE 편집기를 추가하려는 곳

참고: wp_editor

기본 편집기 인 tinymce는 wp-admin / includes / post.php의 함수 인 wp_tiny_mce ()에 의해로드됩니다. 1350 행 의 소스 를 보십시오. 1478 행에 설정 배열이 있습니다. 옵션 중 하나가 텍스트 영역 선택기를 지정하여 javascript 편집기를 적용 할 것입니다. 나는 Keighl 이 자신의 블로그 에서이 게시물을 읽었 습니다. 기사를 읽고 어쩌면 관리자 섹션 플러그인에서 wp_tiny_mce ()를 호출하여 생성 한 두 번째 텍스트 영역에 적용하는 방법이 있습니다.

텍스트 영역에“theEditor”를 클래스 속성으로 추가하여 얻었습니다.

<div style="background: #FFF; border: 1px solid #CCC;"><textarea id="my_details_field" name="my_details" class="theEditor" rows="20" style="width: 100%;"><?=get_post_meta($post->ID, 'my_details', TRUE)?></textarea></div>