it-swarm-ko.tech

커스텀 포스트 타입에서 N 개의 WYSIWYG 에디터를 얻는 방법이 있습니까?

여러 가지 WYSIWYG 편집기를 사용자 정의 게시 유형으로 사용하는 방법이 있습니까? 예를 들어, 2 열 레이아웃이있는 경우 한 열에 대해 하나의 편집기를 갖고 다른 열에 대해 다른 편집기를 갖기를 원했습니다.

27
Paul Sheldrake

사용자 정의 게시물 유형이 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 편집기를 텍스트 영역에 연결해야합니다. 우리는 여전히 메타 박스를위한 HTML을 출력 할 second_column_box 함수를 정의해야한다.

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과 비주얼 편집 모드를 전환 할 수있는 기능은 물론 일반 포스트 에디터의 미디어 삽입 명령도 없다. 모드 전환은 첫 번째 인수가 ID이지만 아직 wp-tinymce 스크립트에 코드화 된 것으로 보이는 함수로 정의 된 것으로 보입니다. 내장 된 tinyMCE 함수를 사용하는 것이 가능하지만 WP HTML 삽입 버튼을 사용하지 않고 전체 tinyMCE와 기본 텍스트 영역 사이에서 텍스트 영역을 변경합니다.

20
nobody

첫째 : Big Thanks to @Thomas McDonald for his answer ; 나는 @Paul Sheldrake이 질문 한 것과 정확히 같은 질문을해야했고 Thomas의 코드가 올바른 방향으로 시작되었습니다.

불행히도 측면 메타 박스에서 TinyMCE를 사용해야했기 때문에 레이아웃을 default 에서 더 간단하고 작은 레이아웃으로 변경해야했기 때문에 붙어 버렸습니다. 나는 해결책을 찾기 위해 어디에서나 실제로, 특히 MoxieCode TinyMCE Wiki and TinyMCE Tips & How To Forum 을 보았고 아무것도 발견하지 못했습니다! 1 내가 찾은 모든 것은 tinyMCE.init({...})을 사용하여 theme, width, height 등을 설정하는 방법을 설명했지만 tinyMCE.execCommand("mceAddControl")을 사용할 때는 사용할 수 없습니다.

한 페이지의 여러 TinyMCE 3 인스턴스 by Hamilton Chua 그리고 그는 그것을 못 박았다! 그의 해결책은 tinyMCE.execCommand("mceAddControl")을 호출하기 전에 tinyMCE.settings를 할당하는 것입니다. 예를 들면 다음과 같습니다.

<?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를 생성했습니다.

 Multiple TinyMCE TextAreas in the WordPress 3.0 Admin Editor 
(출처 : mikeschinkel.com )

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

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

각주

1 : 매우 실망합니다! WordPress 답변을 사용하여 한 달이 조금 넘지 않은 답변 이제 모든 질문에 대한 답변을 같은 수준으로 찾을 것으로 기대합니다 여기에서와 같은 다른 곳에서 나는 일반적으로 실망을 느끼고 있습니다!

19
MikeSchinkel

Google에서이 기사를 Google의 첫 번째 결과로 발견 한 이후로 WP에 이러한 유형의 작업을 처리 할 수있는 기능이 추가되었습니다.

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

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

TinyMCE 편집기를 추가하고 싶을 때마다

참조 : wp_editor

1
ejhost

텍스트 영역에 클래스 속성으로 "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>
0

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

0
kevtrout