TinyMCE

TinyMCE es un editor en JavaScript que permite añadir funcionalidades wysiwyg en los formularios HTML

klee

archivado en: JavaScript / 15 febrero, 2013

Instalación básica

TinyMCE es un plugin de JavaScript muy útil que permite añadir un editor visual a un campo de texto de un formulario.

tiny_00

La instalación básica es muy sencilla. Solo hay que seguir estos pasos:

1). Te bajas el archivo comprimido zip con la última versión completa, que en el momento de escribir estas líneas es la 3.5.8.

2). Se coge todo el contenido de la carpeta tinymce y se pega en la carpeta que no quiera, por ejemplo una que se llame editor.

3). Se sube al server y se escribe este script:

  1. <script type="text/javascript" src="editor/tinymce/jscripts/tiny_mce/tiny_mce.js" ></script >
  2. <script type="text/javascript">
  3. tinyMCE.init({
  4. mode : "textareas",
  5. theme : "simple"
  6. });
  7. </script >

(Cambia editor por el path que necesites).

Con este script inicializamos el editor indicándole en mode que se añada en los campos de formulario del tipo textarea (línea4) y que el theme es el sencillo (línea 5)

Así, ya solo nos falta añadir el formulario.

  • <form action="#" method="post">
  • <textarea rows="4" cols="50">
  • </textarea>
  • <p><input type="submit" value="enviar"></p>
  • </form>

Un poco más complicado

El editor sencillo ya es muy chulo de por sí, pero el modo avanzado es realmente potente.

[singlepic id=66 w=600 h=189 float=center]

Para emplearlo, en la línea 5 del script hay que cambiar el modo del theme "simple" por "advanced"

  1. <script type="text/javascript" src="tinymce/tiny_mce.js" ></script >
  2. <script type="text/javascript">
  3. tinyMCE.init({
  4. mode : "textareas",
  5. theme : "advanced"
  6. });
  7. </script >

Luego se añade una coma tras la declaración del tipo de theme y se indican los plugins que hay que cargar. Esto es, algunas opciones más sofisticadas, como el botón de emoticonos, necesitan plugins específicos, que solo se añaden si se declaran al principio.

Por último, se especifica en qué fila queremos añadir el botón especial con theme_advanced_buttons1_add, cambiando el número que sigue a buttons por la fila en que debe aparecer (1, 2 ó 3). Por ejemplo, así se añadirían los emoticonos:

  1. tinyMCE.init({
  2.         theme : "advanced",
  3.         mode : "textareas",
  4.         plugins : "emotions",
  5.         theme_advanced_buttons1_add : "emotions"
  6. });

[singlepic id=67 w=461 h=347 float=center]

Recogiendo el contenido

El editor tiene tropecientas mil opciones más, pero no sé si tiene mucho sentido complicar esta entrada más de la cuenta. Si acaso ya volveré a tratar temas concretos en entradas específicas. Solo una cosa más antes de terminar. Para evitar inyecciones de SQL, en la página del editor recomiendan emplear la función stripslashes(), que escapa las comillas con una barra invertida.

Por ejemplo, si en el textarea escribimos algo en rojo, tras pasar por el stripslashes()

  • <?php
  • if (isset($_REQUEST['contenido']) && $_REQUEST['contenido'] !="") {
  • $contenido =stripslashes($_REQUEST['contenido']);
  • }
  • echo $contenido;
  • ?>

... en teoría, debería devolver este código HTML:

  • <p>Soy un texto <span style=\"color: #ff0000;\">rojo</span></p>

Sin embargo, según como esté configurado el servidor, tanto esta función como su prima hermana addlashes(), pueden dar la murga, por lo que es mejor recurrir a mysqli::real_escape_string, que ya otro día vemos con calma.

Bonus

Las últimas versiones de WordPress permiten incluir un editor en un meta-box o donde se necesite mediante la función wp_editor(). Ya la explicaré otro día con detalle, dejo de momento solo un ejemplo.

Para este meta-box:

  • add_action( 'add_meta_boxes', 'dirigido_add_custom_box' );
  • function dirigido_add_custom_box() {
  • add_meta_box(
  • 'dirigido_id',
  • __( 'A qui&eacuten va dirigido el libro', 'adeli' ),
  • 'dirigido_custom_box_mostrar',
  • 'libros',
  • 'normal',
  • 'high'
  • );
  • }

Este sería el código para añadir el editor:

  • // mostrar
  • function dirigido_custom_box_mostrar( $post ) {
  • $valor_dirigido = get_post_meta( $post->ID, 'valor_dirigido', true );
  • wp_nonce_field( 'save_dirigido_meta', 'dirigido_nonce' );
  • wp_editor( $valor_dirigido, 'valor_dirigido', array( 'media_buttons' => false, 'textarea_name' => 'valor_dirigido' ) );
  • }
  • add_action( 'save_post', 'dirigido_custom_box_save' );
  • // guardar
  • function dirigido_custom_box_save( $id ) {
  • if( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) return;
  • if( !isset( $_POST['dirigido_nonce'] ) || !wp_verify_nonce( $_POST['dirigido_nonce'], 'save_dirigido_meta' ) ) return;
  • if( !current_user_can( 'edit_post' ) ) return;
  • if( isset( $_POST['valor_dirigido'] ) )
  • update_post_meta( $id, 'valor_dirigido', $_POST['valor_dirigido'] );
  • }

|| Tags:

valoración de los lectores sobre TinyMCE

  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • 5 sobre 5 (3 votos)

¿Te ha parecido útil o interesante esta entrada?
dormido, valoración 1 nadapensativo, valoración 2 un poco sonrisa, valoración 3 a medias guiño, valoración 4 bastante aplauso, valoración 5 mucho

Tú opinión es muy importante, gracias por compartirla!

Los comentarios están cerrados.