Obtener el contenido de WP Tinymce

Estoy tratando de escribir un complemento de WordPress. Obtendré palabras de conteo que en el editor Tinymce de WP. Básicamente, es un contador de palabras que cuenta el tiempo de su publicación y le da este mensaje en un cuadro meta.

Tu publicación tiene 450 palabras.

Mi único problema es obtener palabras de Tinymce a través de javascript. Esto no funciona:

document.getElementById('content')

La identificación del contenido de Tinymce es contenido . Pero este código devuelve NULL. No pude encontrar un nombre de identificación válido para Tinymce.

En breve, todos los demás códigos están listos, solo que no puedo obtener palabras del editor WYSIWYG de WordPress.

Gracias.

Probar:

tinymce.activeEditor.getContent();

o

tinymce.editors.content.getContent();

Donde “contenido” es la identificación de su área de texto.

Del mismo modo, si quisiera obtener solo el texto seleccionado (resaltado) en el área de texto de TinyMCE, haría lo siguiente:

tinymce.activeEditor.selection.getContent();

La API completa está aquí: http://tinymce.moxiecode.com/wiki.php/API3:class.tinymce.Editor

TinyMCE también ofrece muchos eventos a los que puede vincularse, particularmente en su caso, el tecla Arriba, pulsación de teclay tecla presionada eventos.

Asegúrese de llamar a este material solo después de que TinyMCE se haya cargado en la página.

Recuerdo que el pequeño MCE carga contenido dinámicamente desde ajax, así que tal vez tu document.getElementById('content') trate de obtener ese elemento demasiado pronto.

Creo que tienes 2 formas de resolver este problema:

1) espere a que finalice el evento ajax, con un detector de eventos, y luego obtenga el elemento y su texto.

2) use la función tinyMce para obtener el contenido de un área de texto. Aquí puede encontrar algunos consejos útiles:
http://tinymce.moxiecode.com/wiki.php/How-to_load/save_with_Ajax_in_TinyMCE

La respuesta aceptada funcionó para mí, pero para varios editores en una página, tengo que acceder a ella a través de la identificación del editor, así que a continuación

tinymce.editors['content_id'].getContent();

Trabajó para mi.

Aquí hay un ejemplo. El texto debajo del editor se actualizará ya sea que la clave se haya producido en modo Visual o HTML.

modo visual evento en el archivo 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' );

modo HTML evento en el archivo javascript:

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 );
}

Probado en:

• WordPress 3.4.2

Esto funcionó para mí:

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

Dónde texto es el ID del editor de tinymce

Este es el que parece funcionar para mí en cada situación que probé. Independientemente de si partimos del modo texto o del modo visual e independientemente de cambiar los modos y agregar más contenido después de eso.

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' );
}