Usar TinyMCE con textareas en meta boxes para tipos de posts personalizados
Estoy intentando usar el plugin http://www.tinymce.com/ para añadir TinyMCE a mis textareas en los meta boxes que he creado. He buscado otras formas pero no logro que funcione o no entendí bien el concepto. Esto es lo que estoy intentando ahora:
Intenté crear un plugin para añadir el script a mi panel de administración:
add_action('admin_init', 'admin_load_scripts');
function admin_load_scripts() {
$js_file = plugins_url( '/tinymce/jquery.tinymce.min.js', __FILE__ );
wp_enqueue_script('jquery.tinymce.min', $js_file, array('jquery'));
}
Luego necesito llamarlo así:
<script>
tinymce.init({selector:'textarea'});
</script>
Pero no estoy seguro de cómo hacer esto, ya que es para el backend y no para el frontend. ¿Cómo puedo lograr esto?
ACTUALIZACIÓN
Este es mi código para los meta boxes: http://pastebin.com/WcC51uA9
Probé los siguientes métodos (colocándolos en functions.php por supuesto), y en su mayoría o no funcionaron o aparecían en la parte superior o inferior de la página. No aparecían en el textarea en absoluto:

Aquí hay un pastebin con tu código incluido.
Obtener el valor antiguo de tinyMCE
$meta_biography = get_post_meta( $post->ID, 'meta_biography', true );
Llamar al Editor TinyMCE
wp_editor( $meta_biography, 'biography', array(
'wpautop' => true,
'media_buttons' => false,
'textarea_name' => 'meta_biography',
'textarea_rows' => 10,
'teeny' => true
) );
Guardar el valor del Editor o si no hay nada, eliminar los valores antiguos.
if( isset( $_POST['meta_biography'] ) && $_POST['meta_biography'] != '' ) {
update_post_meta( $post_id, 'meta_biography', $_POST['meta_biography'] );
} else {
delete_post_meta( $post_id, 'meta_biography' );
}
Si deseas agregar más opciones al editor - Puedes ver el Codex o revisar este buen Artículo de WPTuts. Querrás usar tinymce
y pasarle un array de configuraciones. Es posible que tengas que eliminar teeny => true
en wp_editor()
ya que el Codex indica que solo usará una configuración mínima del editor.

gracias. Una última pregunta que tenía era, vi el artículo de wptuts y el array de configuraciones, pero no vi mención alguna acerca de pasar un array de configuraciones para el "kitchen sink". ¿Alguna idea sobre eso? Quería hacer un editor para otro campo que solo permita cambiar el color de fuente.

@mygm26 - en el Artículo de WPTuts, está pasando theme_advanced_buttons1
- si quieres una segunda fila también puedes pasar theme_advanced_buttons2
o tantas filas como necesites. En el artículo de WPTuts también tiene wp_adv
al final de theme_advanced_buttons1
que necesitas para mostrar tu segunda o tercera fila de botones. Si solo estás intentando cambiar el color - podría sugerirte que mires el Selector de Color que también está integrado en Wordpress.

Ok lo entendí, gracias. ¿Hay alguna manera de ocultar el kitchen sink en instancias específicas? Estoy usando el código wp editor para múltiples áreas de texto pero quería ocultar el kitchen sink en una de ellas @Howdy_McGee

@mygm26 No estoy 100% seguro de eso y estaba tratando de encontrar la respuesta - puedes consultar esta pregunta pero si alguna vez lo descubres, avísame cómo: http://wordpress.stackexchange.com/questions/117395/tinymce-show-advanced-options-2nd-row-by-default

// para páginas usa 'edit_page_form' como primer parámetro. Ver mi comentario abajo.
add_action( 'edit_form_advanced', 'my_meta_editor' );
function my_meta_editor() {
// configura 'your_meta_key' con la clave real
$content = get_post_meta($post->ID, 'your_meta_key', true);
// solo minúsculas [a-z], sin guiones ni underscores
$editor = 'mymetaeditor';
// Ver mi comentario abajo
$editor_settings = array();
wp_editor( $content, $editor, $editor_settings);
}
Busca Acciones Administrativas para edit_form_after_title
, edit_form_after_editor
, edit_form_advanced
si deseas cambiar la ubicación del meta box.
También consulta wp_editor para configuraciones del editor.

gracias por la respuesta, no estoy seguro de cómo aplicar esto a mi situación. Voy a actualizar mi respuesta con el código que estoy usando para crear mis metaboxes.

Donde quieras colocar el tinymce puedes simplemente poner algo como: http://pastebin.com/6N5adFip -- En mi experiencia, esto funciona mejor en un área de contenido grande, como debajo de tu Editor de Entrada principal o similar.

@Howdy_McGee ok, entonces si pongo el código del pastebin en el archivo functions de mi tema, y reemplazo el id, ¿eso hará que se muestre el editor para ese textarea?

Teóricamente sí, todo lo que @MaxYudin te ha dado son formas de mostrar wp_editor(); deberías poder hacerlo funcionar desde ahí. Es bastante sencillo. De lo contrario, una búsqueda rápida debería darte muchos resultados. ¡Avísame si logras que funcione!

No puedo hacer que funcione. También intenté usar este código -- `// para páginas usa 'edit_page_form' como primer parámetro. Y mira mi comentario abajo. add_action( 'edit_form_advanced', 'my_meta_editor' );
function my_meta_editor() {
// establece 'your_meta_key' con la clave real
$content = get_post_meta($post->ID, 'att_meta_bio', true);
// solo minúsculas [a-z], sin guiones ni guiones bajos
$editor = 'mymetaeditor';
// Mira mi comentario abajo
$editor_settings = array();
wp_editor( $content, $editor, $editor_settings);
}` @Max Yudin @Howdy_McGee

Pégalo en el archivo functions.php
ubicado en el directorio del tema
que estás usando.

Quizás proporciona un pastebin de tu código, con los ejemplos incluidos - podría ser solo un pequeño error de sintaxis.

@Howdy_McGee Probé algunos métodos, y actualicé mi pregunta con los enlaces a los pastebin de lo que intenté.

@mygm26 No estoy seguro de por qué nada te funciona. Intenté completar mi método en el código de tus widgets que podrías probar: http://pastebin.com/HkzarH7h luego obtienes el valor mediante: get_post_meta($post->ID, 'meta_additional', true);

@Howdy_McGee parece estar más cerca, pero ahora el editor parece estar superponiéndose sobre otros campos, impidiendo que sean editables. Cuando intento añadir texto en la biografía y guardarlo, no se guarda. Además, el texto que tenía allí antes de añadir el código ya no está.

Añade algo de HTML y CSS para darle espaciado, busca "Wordpress Añadir CSS Panel de Administración" y podrás crear estilos específicos. También - error mío, cuando llamas a wp_editor deberías pasarle $meta_biography
en lugar de $meta_additional
lo cual debería guardarlo.

@Howdy_McGee ¡Guau, gracias! Hasta ahora todo parece estar funcionando. Tuve que usar clear:both en el contenedor del editor y parece estar bien. Lo único es ¿cómo añado más opciones para el editor? ¿Como el color de fuente? ¿También podrías poner tu respuesta como respuesta a la pregunta para que pueda marcarla correctamente?

Esta función me funcionó perfectamente, solo agrégala a tu archivo functions.php y convierte tus campos personalizados en áreas de texto y listo:
//agrega editor tinymce a campos personalizados de tipo textarea
function admin_add_wysiwyg_custom_field_textarea()
{ ?>
<script type="text/javascript">/* <![CDATA[ */
jQuery(function($){
var i=1;
$('textarea').each(function(e)
{
var id = $(this).attr('id');
if (!id)
{
id = 'customEditor-' + i++;
$(this).attr('id',id);
}
tinyMCE.execCommand("mceAddEditor", false, id);
tinyMCE.execCommand('mceAddControl', false, id);
});
});
/* ]]> */</script>
<?php }
add_action( 'admin_print_footer_scripts', 'admin_add_wysiwyg_custom_field_textarea', 99 );
