WP Tinymce 콘텐츠 가져오기

WP Tinymce 콘텐츠 가져오기

워드프레스 플러그인을 쓰려고 합니다.나는 WP의 Tinymce 에디터에서 단어를 셀 것이다.기본적으로, 글의 길이를 세어 메타 박스에 메시지를 주는 워드 카운터입니다.

투고에는 450개의 단어가 있습니다.

나의 유일한 문제는 자바스크립트를 통해 Tinymce에서 단어를 얻는 것이다.동작하지 않습니다.

document.getElementById('content')

Tinymce의 컨텐츠 ID는 컨텐츠입니다. 그러나 이 코드는 NULL을 반환합니다. Tinymce의 유효한 ID 이름을 찾을 수 없습니다.

곧, 다른 모든 코드가 준비되었습니다. 다만 워드프레스의 WYSIWYG 에디터로부터 단어를 얻을 수 없습니다.

감사해요.

시험:

tinymce.activeEditor.getContent();

또는

tinymce.editors.content.getContent();

여기서 "content"는 텍스트 영역의 ID입니다.

마찬가지로 TinyMCE 텍스트영역에서 선택한(강조표시된) 텍스트만 가져오려면 다음 작업을 수행합니다.

tinymce.activeEditor.selection.getContent();

완전한 API는 http://tinymce.moxiecode.com/wiki.php/API3:class.tinymce.Editor에 있습니다.

TinyMCE는 특히 키업, 키다운 및 키프레스 이벤트와 같은 바인딩할 수 있는 많은 이벤트도 제공합니다.

TinyMCE가 페이지에 로드된 후에만 이 정보를 호출하십시오.

작은 MCE는 Ajax에서 동적으로 콘텐츠를 로드하기 때문에document.getElementById('content')그 요소를 너무 일찍 얻으려고 해.

이 문제를 해결하려면 두 가지 방법이 있습니다.

1) 이벤트 리스너와 함께 ajax 이벤트가 완료될 때까지 기다린 후 요소와 해당 텍스트를 가져옵니다.

2) tinyMce 함수를 사용하여 텍스트 영역의 내용을 가져옵니다.여기서 유용한 힌트를 찾을 수 있습니다.http://tinymce.moxiecode.com/wiki.php/How-to_load/save_with_Ajax_in_TinyMCE

수락된 답변은 유효하지만 한 페이지에 있는 여러 편집자의 경우 에디터 ID를 통해 액세스해야 합니다.

tinymce.content_id'를 선택합니다.get Content();

나한테는 통했어

여기 예가 있습니다.키업이 비주얼 모드인지 HTML 모드인지에 관계없이 에디터 아래 텍스트가 업데이트됩니다.

php 파일의 비주얼 모드 이벤트:

function my_tiny_mce_before_init( $init ) {
    $init['setup'] = "function( ed ) { ed.onKeyUp.add( function( ed, e ) { repeater( e ); }); }";
    return $init;
}
add_filter( 'tiny_mce_before_init', 'my_tiny_mce_before_init' );

Javascript 파일의 HTML 모드 이벤트:

jQuery( document ).ready( function( $ ) {

    $('<div id=look-at-it></div>').insertAfter('#postbox-container-1');

    $('#content').on('keyup', function( e ) {   
        repeater( e );
    });
});


var repeater = function ( e ) {
    var targetId = e.target.id;
    var text = '';

    switch ( targetId ) {

         case 'content':
             text = jQuery('#content').val(); 
             break;

         case 'tinymce':
             if ( tinymce.activeEditor )
                 text = tinymce.activeEditor.getContent();
             break;
    }

    jQuery('#look-at-it').html( text );
}

---

테스트 대상:

• WordPress 3.4.2

이 방법은 효과가 있었습니다.

if (jQuery("#wp-text-wrap").hasClass("tmce-active")){
    text1 = tinyMCE.activeEditor.getContent( { format : 'html' } );
}else{
    text1 = jQuery('[name="text"]').val();

여기서 text는 작은 편집기의 ID입니다.

이것은 내가 테스트한 모든 상황에서 효과가 있는 것 같다.텍스트 모드에서 시작하든, 비주얼 모드로 시작하든, 모드를 변경하거나 그 이후에 콘텐츠를 추가하든 상관없습니다.

if ( tinyMCE.editors['id-of-your-editor'] ) {
    tinyMCE.editors['id-of-your-editor'].save();
    tinyMCE.editors['id-of-your-editor'].load();
    var your_content = tinyMCE.editors['id-of-your-editor'].getContent();
} else if ( document.getElementById( 'id-of-your-editor' ) ) {
    var your_content = document.getElementById( 'id-of-your-editor' ).value;
} else {
    alert ( 'Error' );
}

언급URL : https://stackoverflow.com/questions/5759297/getting-wp-tinymces-content