¿Por qué no puede utilizarse wp_editor en un Widget personalizado?

He estado trabajando en el desarrollo de un plugin que añade un widget que le permite editar el contenido con un editor wysiwyg. Quiero usar el editor de wordpress por defecto llamando al
wp_editor()
. He visto a gente decir no puedes hacerlo, y efectivamente, se cuelga cuando intenta actualizar el contenido del widget.

Alguien puede explicarme por qué
wp_editor()
¿No se puede utilizar en widgets? Esperaba averiguar cómo conseguir que una vez que sé por qué no funciona. Sin embargo, Chrome no escupa cualquier error en la consola, así que no estoy seguro de que lo que molesta a.

Gracias, goldentoa11.


Solución 1

Respuesta corta: porque hay un widget oculto donde aparece primero el TinyMCE. Respuesta larga (lo siento, una respuesta muy larga): ir a la Codex and copy the example widget Foo_Widget para asegurarse de que estamos hablando el mismo código. Ahora abre tu IDE (no un editor) y escribir un widget prueba corto como plugin.

A partir de una rúbrica plugin mínimo...
Foo_Widget
...

agregando el código del widget del códice y registrando el widget con el
<?php
/*
Plugin Name: Widget Test Plugin
Description: Testing plugincode
*/
llamada. Ahora modificar el
add_action()
método dentro de la clase widget como se muestra aquí:
form
Ve a tu blog, activar el plugin, ir a la página de widget y arrastre el
public function form( $instance ) {
    if ( isset( $instance[ 'title' ] ) ) {
        $title = $instance[ 'title' ];
    }
    else {
        $title = __( 'New title', 'text_domain' );
    }
    ?>
    <p>
    <label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( 'Title:' ); ?></label>
    <input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>" />
    </p>
    <?php

/*** add this code ***/
    $content   = 'Hello World!';
    $editor_id = 'widget_editor';

    $settings = array(
        'media_buttons' => false,
        'textarea_rows' => 3,
        'teeny'         => true,
    );

    wp_editor( $content, $editor_id, $settings );
/*** end editing ***/
}
en una barra lateral.

Usted verá fallará. ¿Ves la
Foo Widget
¿Descripción del lado izquierdo? Hacer un clic derecho sobre la descripción y elija 'Inspeccionar' en sus herramientas de desarrollador (tienes algunas herramientas para desarrolladores como FireBug o cromo DevTools, eh? En FireFox usted puede también elegir la estructura en \
Foo Widget
Modificar el código dentro de la
/*** add this code ***/
    $rand    = rand( 0, 999 );
    $ed_id   = $this->get_field_id( 'wp_editor_' . 

$rand ); $ed_name = $this->get_field_name( 'wp_editor_' . $rand ); $content = 'Hello World!'; $editor_id = $ed_id; $settings = array( 'media_buttons' => false, 'textarea_rows' => 3, 'textarea_name' => $ed_name, 'teeny' => true, ); wp_editor( $content, $editor_id, $settings ); /*** end edit ***/
método de nuevo con el código anterior.

Creamos un número único con
form
y anexar este número a la
rand()
y
id
atributos. Pero, ¿qué pasa con los valores de ahorro??? Ir a la
name
método y añadir
update
en la primera línea.

Si pulsas
die(var_dump($new_instance));
en el widget, el script se mueren e imprimir los valores presentados. Verás que hay un valor como
Save
.

Si se recarga la pagina y salvar el widget nuevo, el número se cambiará a otra cosa porque es un número aleatorio. ¿Cómo sabré que número aleatorio fue fijado en el widget? Simplemente envíe el número aleatorio con los datos del widget.

Añadir esto a la
wp_editor_528
método
form
En la rutina de actualización, ahora podemos acceder el número aleatorio con
printf(
  '<input type="hidden" id="%s" name="%s" value="%d" />',
  $this->get_field_id( 'the_random_number' ),
  $this->get_field_name( 'the_random_number' ),
  $rand
);
y así podemos acceder a contenidos con el editor
$new_instance['the_random_number'];
Como puedes ver, se presentará el contenido del editor y puede guardarlo o hacer otra cosa con él. ADVERTENCIA el contenido del editor se presenta solamente correctamente si el TinyMCE no está en modo visual (modo WYSIWYG).

Tienes que poner el texto modo befor Presione 'Guardar'. De lo contrario el contenido predefinido (en este caso
$rand = (int) $new_instance['the_random_number'];
$editor_content = $new_instance[ 'wp_editor_' . 

$rand ]; die(var_dump($editor_content));
) se presenta. No sé por qué, pero allí es una solución simple para esto.

Escribir un script de jQuery pequeño que desencadena la haga clic en la pestaña 'texto' antes de guardar el contenido del widget. JavaScript (guarda como
$content = 'Hello World!';
en algún lugar de tus tema/plugin carpetas):
widget_script.js
Y enqueue se
jQuery(document).ready(
    function($) {
        $( '.widget-control-save' ).click(
            function() {
                // grab the ID of the save button
                var saveID   = $( this ).attr( 'id' );

                // grab the 'global' ID
                var ID       = saveID.replace( /-savewidget/, '' );

                // create the ID for the random-number-input with global ID and input-ID
                var numberID = ID + '-the_random_number';

                // grab the value from input field
                var randNum  = $( '#'+numberID ).val();

                // create the ID for the text tab
                var textTab  = ID + '-wp_editor_' + randNum + '-html';

                // trigger a click
                $( '#'+textTab ).trigger( 'click' );

            }
        );
    }
);
Eso es todo.

Fácil, ¿verdad? ;).

Solución 2

No sé la respuesta exacta por qué wp_editor() no funciona en el interior de widgets, pero widgets tienen algunas restricciones. Pero wp_editor es sólo una de muchas posibilidades para utilizar el editor visual en el backend de WordPress. Intenta inicializar el editor visual con jQuery de alguna manera.

No creo que puede hacerlo dentro de la ventana del widget sí mismo, pero podría ayudar una caja de luz o algo así. Aquí es una manera de hacerlo:
/**
 * Add TinyMCE to multiple Textareas (usually in backend).
 */
//  add_action('admin_print_footer_scripts','my_admin_print_footer_scripts',99);
function my_admin_print_footer_scripts() {
    ?><script type="text/javascript">/* <![CDATA[ */
        jQuery(function($)
        {
            var i=1;
            $('.customEditor textarea').each(function(e)
            {
                var id = $(this).attr('id');

                if (!id)
                {
                    id = 'customEditor-' + i++;
                    $(this).attr('id',id);
                }

                tinyMCE.execCommand('mceAddControl', false, id);

            });
        });
    /* ]]> */</script><?php
}
/**
 * Add TinyMCE to multiple Textareas (usually in backend).
 */
//  add_action('admin_print_footer_scripts','my_admin_print_footer_scripts',99);
function my_admin_print_footer_scripts() {
    ?><script type="text/javascript">/* <![CDATA[ */
        jQuery(function($)
        {
            var i=1;
            $('.customEditor textarea').each(function(e)
            {
                var id = $(this).attr('id');

                if (!id)
                {
                    id = 'customEditor-' + i++;
                    $(this).attr('id',id);
                }

                tinyMCE.execCommand('mceAddControl', false, id);

            });
        });
    /* ]]> */</script><?php
}
.

Solución 3

Es muy posible lograr tinyMCE en widget. En realidad it has been already done. La razón por simplemente llamando
wp_editor()
No funciona en forma de widget es ese marcado de forma asincrónica se entrega usando AJAX.

Probar searching here para obtener más detalles..




Problemas relacionados

Cómo hacer imagen en TinyMCE clickable

Correos personalizados metabox textarea usando wp_editor

Cómo utilizar wp_editor(); en functions.php entonces recuperar el contenido de la plantilla

Cómo utilizar varias instancias de trato o anuncio con temporizador de cuenta regresiva Plugin Widget

Usando wp_editor en shortcode

¿WordPress widget args classname?

¿Cómo incluyen\/importación un Widget personalizado desde el tema de los padres en My Child Theme?

No se puede quitar un widget de admin

¿Cómo puedo imprimir el contenido del campo de wp_editor?

Añadir nueva área de pie de página Widget con opciones limitadas.

Widget de donde puede hacer cambios en el contenedor

'wp_editor()' CSS estropeando el diálogo jQuery

Source: Stack Exchange Inc; License: cc by-sa 3.0 Contacto / Contact