¿Hay alguna forma de obtener N números de editores WYSIWYG en un tipo de publicación personalizada?

Diga que su tipo de publicación personalizada se llamó Properties , agregaría la casilla para mantener su editor tinyMCE adicional usando un código similar a este:

function register_meta_boxen() {
    add_meta_box("wysiwyg-editor-2", "Second Column", "second_column_box",
    "properties", "normal", "high");    
}
add_action('admin_menu', 'register_meta_boxen');

wysiwyg-editor-2 es el ID que el cuadro de meta le habrá aplicado, Second Column es el título que tendrá el cuadro de meta, second_column_box es la función que imprimirá el HTML para el cuadro de meta, properties es nuestro tipo de publicación personalizada, normal es la ubicación del cuadro de meta, y high especifica que se debe mostrar lo más alto posible en la página. (Generalmente debajo del editor predeterminado de tinyMCE).

Luego, tomando este como el ejemplo más básico, debe adjuntar el editor tinyMCE a un área de texto. Todavía tenemos que definir nuestra función second_column_box , que imprimirá el HTML para el meta box, por lo que este es un lugar tan bueno como cualquiera para hacer esto:

function second_column_box() {
    echo <<<EOT
    <script type="text/javascript">
jQuery(document).ready(function() {
    jQuery("#tinymce").addClass("mceEditor");
    if ( typeof( tinyMCE ) == "object" &&
         typeof( tinyMCE.execCommand ) == "function" ) {
        tinyMCE.execCommand("mceAddControl", false, "tinymce");
    }
});
</script>
    <textarea id="tinymce" name="tinymce"></textarea>
EOT;
}

Hay un par de problemas que no estoy seguro de cómo superarlos. El editor tinyMCE se anidará dentro de un metabox, lo que podría no ser ideal, y no contará con la capacidad de cambiar entre los modos de edición Visual y HTML, así como los comandos de inserción de medios que tiene el editor de publicaciones normal. El cambio de modos parece definirse como una función cuyo primer argumento es el ID, pero también parece estar codificado en el script wp-tinymce. Es posible utilizar las funciones tinyMCE integradas para hacerlo, pero esto cambia el área de texto entre tinyMCE completo y un área de texto básica, sin ninguno de los botones de inserción HTML de WP.

Primero: Muchas gracias a @Thomas McDonald por su respuesta ; Necesitaba descubrir exactamente la misma pregunta que @Paul Sheldrake hizo y el código de Thomas me hizo comenzar en la dirección correcta.

Lamentablemente, luego me quedé atascado porque necesitaba cambiar el diseño del predeterminado a un diseño más simple y más pequeño, ya que necesitaba usar el TinyMCE en un metabox lateral. Busqué prácticamente en todas partes en busca de una solución y, especialmente, en MoxieCode TinyMCE Wiki y Consejos y amp; TinyMCE How To Forum y no encontré nada! ¹ Todo lo que encontré explicó cómo configurar theme , width , height , etc. usando tinyMCE.init({...}) pero aparentemente no puedes usar eso cuando usas tinyMCE.execCommand("mceAddControl") .

Me quedé perplejo cuando encontré el artículo múltiples instancias de TinyMCE 3 en una página por Hamilton Chua , y lo clavó! Su solución fue asignar tinyMCE.settings antes de llamar a tinyMCE.execCommand("mceAddControl") , por ejemplo:

<?php 
$id = "sidebar-content";
$script = <<<EOT
<script type="text/javascript">
jQuery(document).ready(function($) {
    $("#{$id}").addClass("mceEditor");
    if ( typeof( tinyMCE ) == "object" &&
         typeof( tinyMCE.execCommand ) == "function" ) {
      tinyMCE.settings = {
        theme : "advanced",
        mode : "none",
        language : "en",
        height:"200",
        width:"100%",
        theme_advanced_layout_manager : "SimpleLayout",
        theme_advanced_toolbar_location : "top",
        theme_advanced_toolbar_align : "left",
        theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull",
        theme_advanced_buttons2 : "",
        theme_advanced_buttons3 : ""
      };
      tinyMCE.execCommand("mceAddControl", true, "{$id}");
    }
});
</script>
<textarea id="sidebar-content" name="sidebar-content"></textarea>
EOT;

La parte triste es que esto realmente no fue difícil, pero no estaba documentado en ningún otro lugar que pudiera encontrar. Es sorprendente descubrir que casi nadie más ha experimentado este problema.

De todos modos, el código anterior generó el siguiente segundo TinyMCE exactamente en el formato / diseño que mi cliente necesitaba:

Entonces,siestáutilizandoelcódigo@ThomasMcDonaldqueseencuentraarriba,tienelanecesidaddemodificareldiseño,asegúresederevisarelimpresionanteartículodeHamiltonChua(¡graciasHam!):

• Varias instancias de TinyMCE 3 en una página

P.S. Si haces algo, incluso un poco mal, es posible que TinyMCE no se muestre en absoluto. Por ejemplo, en mi caso utilizo theme: "simple" al principio y no obtuve nada y me llevó más de una hora darme cuenta de que solo necesitaba usar theme: "advanced" . Por lo tanto, si descubre que TinyMCE no funciona para usted, asegúrese de intentar cambiar las cosas, es posible que tenga un problema similar. (Por cierto, no probé ningún otro tema ni exploré qué más hay disponible; si encuentra otros temas que funcionen, por favor, deje un comentario a continuación.)

Nota al pie

1 : ¡Muy frustrante! Después de poco más de un mes con WordPress Answer, ahora estoy esperando encontrar respuestas a todas mis preguntas con el mismo nivel de calidad que en este caso, y en otros lugares, generalmente encuentro decepciones.

Desde que encontré este artículo como el primer resultado en Google, solo quería comentar que WP ahora ofrece una función para manejar este tipo de tareas.

Dentro de la función add_meta_box , agregue el siguiente código - >

wp_editor( $content, $editor_id, $settings = array() );

Donde quiera que quiera agregar el editor TinyMCE

Referencia: wp_editor

El editor predeterminado, tinymce, se carga mediante una función en wp-admin / includes / post.php llamado wp_tiny_mce (); Busque en la fuente en la línea 1350. Hay una variedad de configuraciones en la línea 1478. Una de las opciones aparentemente designa el selector de área de texto para aplicar el editor de javascript. Estaba leyendo esta publicación de Keighl en su blog que me indicó esto. Lea el artículo, y tal vez haya una forma de llamar a wp_tiny_mce () en un complemento de la sección de administración y aplicarla a una segunda área de texto que cree.

Lo obtuve simplemente agregando "theEditor" como atributo de clase a un área de texto:

<div style="background: #FFF; border: 1px solid #CCC;"><textarea id="my_details_field" name="my_details" class="theEditor" rows="20" style="width: 100%;"><?=get_post_meta($post->ID, 'my_details', TRUE)?></textarea></div>