¿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.
¿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.
Respuestas:
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-2
es el ID que le habrá aplicado el cuadro meta, Second Column
es el título que tendrá el cuadro meta, second_column_box
es la función que imprimirá el HTML para el cuadro meta, properties
es nuestro tipo de publicación personalizada, normal
es la ubicación del cuadro meta , y high
especifica 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_box
funció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.
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.settings
antes 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:
(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).
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!
$script
y tampoco hay cierre para tu heredoc, es decir. EOT;
. Además de los pequeños errores, es un buen ejemplo de trabajo ...;)
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_box
función, agregue el siguiente código ->
wp_editor( $content, $editor_id, $settings = array() );
Donde quiera agregar el editor TinyMCE
Referencia: wp_editor
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.
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>