프론트 엔드에 TinyMCE 편집기를 포함 시키려면 어떻게해야합니까?

22

사용자가 게시 할 수 있지만 지금까지 운이 없었던 곳에서 TinyMCE 편집기를 프론트 엔드에 추가하려고합니다. 코드는 다음과 같습니다.

PHP :

add_action('wp_print_scripts', 'my_enqueue_scripts');

function my_enqueue_scripts() {      
        wp_enqueue_script( 'tiny_mce' );
        if (function_exists('wp_tiny_mce')) wp_tiny_mce();
}

자바 스크립트 :

jQuery(document).ready(function(){
tinyMCE.init({
        mode : "textareas",
        theme : "simple", 
        /*plugins : "autolink, lists, spellchecker, style, layer, table, advhr, advimage, advlink, emotions, iespell, inlinepopups, insertdatetime, preview, media, searchreplace, print, contextmenu, paste, directionality, fullscreen, noneditable, visualchars, nonbreaking, xhtmlxtras, template",*/
        editor_selector :"editor"
    });
});

HTML :

<textarea rows="8" cols="40" name="description" id="editor" class="required"><?php echo $description;?></textarea>

문제 : 텍스트 편집기가 텍스트 영역에 추가되지 않습니다. TinyMCE js 파일이로드 중이지만

tinymce front-end

— 시시르
소스

1

아마도 프론트 엔드 편집기

— mike23

17

글쎄, 지금 wp 3.3 덕분에 우리는 그것을 할 수있는 wp_editor()기능을 가지고 있습니다 :)

— 시시르
소스

1

예, 단축 코드에서 사용할 수 있도록하는 대신 편집기를 직접 출력한다는 점을 제외하고는 ...

— cale_b

4

php ob_content 함수를 사용하여 짧은 코드에서 이것을 사용할 수 있습니다. 이 함수를 사용하면 변수에서 출력을 캡처 할 수 있습니다. 이와 같이 : ob_start (); include (static :: getTemplatePath (). '/'. $ templatePath. '.php'); $ template = ob_get_contents (); ob_end_clean (); $ template을 반환;

— Tosh

2

editor_selector ID가 아닌 클래스를 타겟팅하기위한 것입니다.

또한를 사용할 때 작동하려면 editor_selector설정 mode: "specific_textareas"해야합니다.

http://tinymce.moxiecode.com/wiki.php/Configuration:editor_selector를 참조하십시오.

따라서 JavaScript와 HTML은 다음과 같아야합니다.

jQuery(document).ready(function(){
tinyMCE.init({
        mode : "specific_textareas",
        theme : "simple", 
        /*plugins : "autolink, lists, spellchecker, style, layer, table, advhr, advimage, advlink, emotions, iespell, inlinepopups, insertdatetime, preview, media, searchreplace, print, contextmenu, paste, directionality, fullscreen, noneditable, visualchars, nonbreaking, xhtmlxtras, template",*/
        editor_selector :"tinymce-enabled"
    });
});

<textarea rows="8" cols="40" name="description" id="editor" class="tinymce-enabled required"><?php echo $description;?></textarea>

— Maryisdead
소스

0

@maryisdead 대답이 맞을 수도 있습니다. 또 다른 팁을 줄 것입니다. 먼저 페이지에 id = "editor"로 요소가 하나만 있는지 확인한 다음과 같이 tinymce를 설정하십시오.

tinyMCE.init({
    ...
    mode : "exact",
    elements : "editor"
});

또한 자바 스크립트 코드에서 $ 대신 jQuery를 사용하여 jQuery 메소드 및 선택기를 호출하는지 확인하십시오.

— adrian7
소스

0

editor_selector는 클래스 용이며 ID 용이 아닙니다.

텍스트 영역의 클래스 이름으로 editor_selector의 값을 사용해야합니다.

— 프랭클린 인바 라즈
소스