¿Hay alguna manera de obtener un número N de editores WYSIWYG en un tipo de publicación personalizado?


27

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


¿Qué tipo de configuración WYSIWYG necesitas? El panel completo incl. subir imágenes, modo de pantalla completa, etc.
Hakre


Bueltge tiene un buen artículo que muestra cómo se puede hacer eso
hakre

Necesito exactamente esta pregunta respondida para un proyecto de cliente. ¡Gracias por preguntar!
MikeSchinkel

MikeSchinkel: soy nuevo en WordPress; ¿Dónde pongo el código que publicaste?

Respuestas:


21

Supongamos que se llamó a su tipo de publicación personalizada Properties, agregaría el cuadro 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-2es el ID que le habrá aplicado el cuadro meta, Second Columnes el título que tendrá el cuadro meta, second_column_boxes la función que imprimirá el HTML para el cuadro meta, propertieses nuestro tipo de publicación personalizada, normales la ubicación del cuadro meta , y highespecifica que debe mostrarse lo más alto posible en la página. (Por lo general, 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 second_column_boxfunción que imprimirá el HTML para el cuadro de meta, por lo que este es un lugar tan bueno como cualquier otro 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 superar. El editor tinyMCE estará anidado 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 HTML y Visual, así como los comandos de inserción de medios que tiene el editor de publicación normal. Cambiar los modos parece estar definido 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 incorporadas de tinyMCE 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.


"Meta_boxen"? ¡Increíble! Pensé que era el único. Voy a darle una oportunidad a la solución en un momento.
mfields

La solución de Thomas McDonalds no me funciona en 3.1: ¿hay alguna forma en 3.1 de hacer esto?

19

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

Desafortunadamente, 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. Miré prácticamente por todas partes para una solución y, especialmente, en el Moxiecode TinyMCE Wiki y TinyMCE Consejos y Cómo Foro Para encontrar nada! 1 Todo lo que encontré explicado cómo configurar theme, width, height, etc., utilizando tinyMCE.init({...}), pero al parecer no se puede utilizar que cuando se utiliza tinyMCE.execCommand("mceAddControl").

Estaba casi perplejo cuando me encontré con el artículo en varias instancias de TinyMCE 3 en una página de Hamilton Chua , ¡y lo logró! Su solución fue asignar tinyMCE.settingsantes de llamar 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 no fue realmente difícil, pero no fue documentado en ningún otro lugar que pude 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 necesitaba mi cliente:

Múltiples áreas de texto de TinyMCE en el editor de administración de WordPress 3.0
(fuente: mikeschinkel.com )

Entonces, si está utilizando el código @Thomas McDonald anterior, encuentra que tiene alguna necesidad de modificar el diseño, asegúrese de consultar el increíble artículo de Hamilton Chua (¡gracias Ham!) :

PD: Si haces algo incluso un poco mal, es posible que TinyMCE simplemente no se muestre en absoluto. Por ejemplo, en mi caso lo usotheme: "simple"al principio y no obtuve nada y me llevó más de una hora darme cuenta de que solo necesitaba usarlotheme: "advanced". Entonces, si encuentra que TinyMCE no funciona, asegúrese de intentar cambiar las cosas, es posible que tenga un problema similar. (Por cierto, no he probado ningún otro tema ni explorado qué más hay disponible; si encuentra otros temas que funcionan, 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 aquí, ¡y en otros lugares generalmente encuentro decepciones!


Mike, te estás perdiendo un igual después $scripty tampoco hay cierre para tu heredoc, es decir. EOT;. Además de los pequeños errores, es un buen ejemplo de trabajo ...;)
t31os

@ t31os - Gracias por hacérmelo saber. No estoy seguro de cómo los extrañé; Por lo general, pruebo y luego copio mis respuestas de mi código de trabajo. ¡Imagínate!
MikeSchinkel

El uso de esta solución resultó en que el editor visual normal se configurara también SimpleLayout para mí en 3.1.
mfields

@mfields - Bummer que 3.1 ha roto tantas cosas. :-(
MikeSchinkel

Quería llamar su atención sobre este artículo, ya que puede aclarar algunas cosas: dannyvankooten.com/450/…
marfarma

2

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 tarea.

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

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

Donde quiera agregar el editor TinyMCE

Referencia: wp_editor


1
Las respuestas deberían ser más que enlaces simples . En realidad, deberían ser una respuesta en lugar de una ruta donde alguien quizás encuentre una respuesta. Ayude a evitar la descomposición del enlace, edite su respuesta y proporcione la información necesaria que ayude al OP y a los visitantes posteriores a resolver su problema.
Kaiser

0

El editor predeterminado, tinymce, es cargado por una función en wp-admin / includes / post.php llamada wp_tiny_mce (); Mire 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 señaló hacia ella. 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

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>
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.