javascript - quicktag - Obtener el contenido de WP Tinymce

quicktag wordpress

Question

Estoy tratando de escribir un plugin de Wordpress. Obtendré palabras de conteo que en el editor de Tinymce de WP. Básicamente, es un contador de palabras que cuenta mucho de tu publicación y te da este mensaje en un meta box.

Tu publicación tiene 450 palabras.

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

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, pero no puedo obtener palabras del editor WYSIWYG de Wordpress.

Gracias.

Answer 1

Aquí hay un ejemplo. El texto que se encuentra debajo del editor se actualizará si la clave se produjo en modo Visual o HTML.

Evento de modo visual 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'' );

Evento de modo HTML 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

Answer 2

Este es el que parece funcionar para mí en cada situación que he probado. Independientemente de si comenzamos desde el modo de texto o en el 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'' );
}

Answer 3

Esto funcionó para mí:

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

Donde el texto es el ID del editor tinymce

Answer 4

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

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

Trabajó para mi.

Answer 5

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

Creo que tienes 2 formas de resolver este problema:

1) Espere la finalización del evento ajax, con un detector de eventos, y luego obtenga el elemento y su texto.

2) Utilice 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

Answer 6

Tratar:

tinymce.activeEditor.getContent();

o

tinymce.editors.content.getContent();

Donde "contenido" es el id de tu área de texto.

De manera similar, si quisiera obtener solo el texto seleccionado (resaltado) en el área de texto de TinyMCE, haría:

tinymce.activeEditor.selection.getContent();

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

TinyMCE también ofrece una gran cantidad de eventos a los que se puede enlazar, especialmente en su caso los eventos keyup , keydown y keypressed .

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