it-swarm-es.com

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

¿Hay alguna forma de tener varios editores WYSIWYG para un tipo de publicación personalizada? Por ejemplo, si tuviera un diseño de 2 columnas, quería tener un editor para una columna y otro editor para la otra.

27
Paul Sheldrake

Supongamos que su tipo de publicación personalizada se llamaba Properties, agregaría la casilla para contener 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 mensaje personalizado, normal es el ubicación del meta box, y high especifica que se debe mostrar lo más alto posible en la página. (Por lo general, por debajo del editor predeterminado de tinyMCE).

Luego, tomando esto 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 cuestiones que no estoy seguro de cómo superarlas. El editor tinyMCE se anidará dentro de un metabox, 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. Cambiar los 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 WP HTML.

20
nobody

Primero: Big Thanks 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 de la configuración predeterminada a un diseño más simple y pequeño, ya que necesitaba usar el TinyMCE en un metabox lateral. Busqué prácticamente en todas partes buscando una solución y especialmente en el MoxieCode TinyMCE Wiki y TinyMCE Tips & How To Forum ¡y no encontré nada! 1 Todo lo que encontré explica cómo configurar theme, width, height, etc. usando tinyMCE.init({...}) pero aparentemente no puedes usar eso cuando usas tinyMCE.execCommand("mceAddControl").

Estaba casi perplejo cuando encontré el artículo varias instancias de TinyMCE 3 en una página por Hamilton Chua , ¡y lo logró! 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;

Lo triste es que esto no fue realmente difícil, pero no se documentó 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:

 Multiple TinyMCE TextAreas in the WordPress 3.0 Admin Editor 
(fuente: mikeschinkel.com )

Por lo tanto, si está utilizando el código @Thomas McDonald que se encuentra arriba, tiene la necesidad de modificar el diseño, asegúrese de revisar el impresionante artículo de Hamilton Chua (¡gracias Ham!):

P.S. Si hace algo, aunque sea un poco incorrecto, es posible que TinyMCE simplemente no se muestre. 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

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

18
MikeSchinkel

Como 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

1
ejhost

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>
0

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 serie 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 este post de Keighl en su blog que me indicó esto. Lea el artículo, y tal vez haya una manera de llamar a wp_tiny_mce () en un complemento de la sección de administración y aplicarlo a una segunda área de texto que cree.

0
kevtrout