Ago 262014
 
Artículo HTML

En determinados casos, un sitio web puede necesitar implementar una manera de permitir a sus usuarios introducir contenido con formato, de manera que sea posible incluir imágenes, texto en distintos tamaños, colores y tipos de letra, etc.

Los editores de texto que permiten ver el resultado final durante la edición del contenido se conocen habitualmente por sus siglas en inglés como editores WYSIWYG (What you see it what you get: Lo que ves es lo que obtienes). De entre ellos, uno de los más conocidos es el editor TinyMCE, incorporado en numerosos sistemas de gestión de contenido, como el propio WordPress.

Pero TinyMCE es una aplicación independiente, que puede ser utilizada en otros entornos. En este artículo se explican los pasos a seguir para incorporar a una aplicación web la funcionalidad de edición de contenido que implementa TinyMCE.

Descarga e instalación de TinyMCE

En el momento de escribir este artículo, en la página de descargas del sitio web oficial de TinyMCE podemos seleccionar entre tres opciones para la descarga del paquete base:

  • TinyMCE 4.1.4 – Versión “estándar”
  • TinyMCE 4.1.4 JQuery package – Versión para ser utilizada junto con la librería JQuery
  • TinyMCE 4.1.4 development package – Versión para desarrolladores

Para los propósitos de este artículo, descargamos la versión estándar. El fichero descargado se llama tinymce_4.1.4.zip, y tiene un tamaño de 319.736 bytes.

Para instalarlo, basta con descomprimir el fichero en el directorio raíz del servidor web. Esto crea un directorio “tinymce/js/tinymce” bajo el cual se encuentra la librería principal tinymce.min.js, y los directorios langs, plugins, themes y skins

Instalación de la traducción al español y otros idiomas

Accediendo a la página de descarga de traducciones de TinyMCE, seleccionamos los idiomas en los que queremos ofrecer el editor (p.ej., spanish), y los descargamos. El fichero descargado se llama tinymce_languages.zip. Extraemos los ficheros que contiene en el directorio tinymce/langs.

Página de pruebas

Para probar la funcionalidad de TinyMCE, creamos una página “prueba_tinymce.html” con el siguiente contenido:

Con esto, podemos cargar la página “prueba_tinymce.html” en un navegador, y veremos un área de texto con una barra de herramientas en la parte superior en la que se encuentra un menú de edición y una serie iconos de controles de edición:

Con esto, la funcionalidad básica de edición esta implementada. Para que el ejemplo sea plenamente funcional, sólo queda añadir al formulario un botón de “Enviar”, y escribir el código que recibe el formulario y lo procesa como corresponda a la aplicación que se está desarrollando: guardándolo en un fichero o en una base de datos, enviándolo por correo electrónico,…

Para ello, el lector de este artículo puede encontrar interesantes otros artículos de este blog:

Inicialización de TinyMCE

Como podemos ver en el código HTML de ejemplo, la inicialización de TinyMCE se realiza con una llamada a la función tinymce.init(), a la que se le pasa un argumento que es un array de parámetros. Los parámetros de inicialización básicos son:

  • selector – Especifica los elementos de la página a los que se añadirá el menú de edición de TinyMCE
  • plugins – Es la lista de plugins que deben ser cargados para proporcionar la funcionalidad de edición deseada
  • toolbar – Es la lista de iconos a presentar en la barra de herramientas

Funcionalidad básica

El editor básico permite añadir a la barra de herramientas una serie de controles de uso común:

  • newdocument – limpia el área de edición
  • bold, italic, underline, strikethrough, subscript, superscript – controles para poner el texto en negrita, cursiva, subrayado, tachado, subíndice y superíndice
  • alignleft, aligncenter, alignright, alignjustify – Establece la alineación del texto seleccionado
  • bullist, numlist – Crea listas no ordenadas (HTML <ul>) y ordenadas numéricamente (HTML <ol>)
  • styleselect – menú sencillo para aplicar un estilo de encabezamiento (<h1>…<h6>)a un texto
  • formatselect – menú con más opciones de estilo
  • fontselect, fontsizeselect – Establece el tipo de letra y tamaño del texto seleccionado
  • cut, copy, paste – botones de cortar, copiar y pegar
  • indent, outdent – indentar a la derecha, indentar a la izquierda
  • blockquote – insertar un elemento <blockquote> … </blockquote> alrededor del texto seleccionado
  • undo, redo – Deshacer la última acción, rehacer la última acción
  • removeformat – Eliminar el formato del texto seleccionado

Plugins

La instalación de TinyMCE incluye un buen número de plugins bajo el directorio “plugins“, para añadir distintos tipos de funcionalidades al editor:

  • advlist – El editor básico incluye los controles bullist y numlist para crear listas no ordenadas (elementos <ul>) y listas ordenadas numéricamente (elementos <ol>). El plugin advlist añade la posibilidad de seleccionar el tipo de símbolo en las listas no ordenadas (disco, círculo, cuadrado), y el tipo de ordenación en las listas ordenadas (numérica, alfabética,…)
  • anchor – el plugin anchor permite añadir a la barra de herramientas el control anchor para añadir “anclas” (por ejemplo, para añadir una tabla de contenidos al comienzo de la página, con enlaces a las secciones correspondientes en el documento).
  • autolink – Genera automáticamente un enlace cuando se escribe una URL, en IE.
  • autoresize – Ajusta el tamaño del editor al contenido. Se puede especificar un tamaño mínimo y máximo con los parámetros autoresize_min_heightautoresize_max_height respectivamente
  • autosave – genera un aviso si el contenido del editor se ha modificado, pero no se ha guardado
  • bbcode – Permite introducir BBCode básico para especificar formatos
  • charmap – Añade un mapa de caracteres al menú que permite añadir caracteres especiales. También se puede añadir un icono a la barra de herramientas incluyendo el control charmap en el parámetro toolbar.
  • code – Añade al menú una opción para ver y editar el código HTML del documento (control en la barra de herramientas: code)
  • colorpicker – Añade al editor un selector de color mejorado, para ser usado por otros plugins (p.ej., textcolor)
  • contextmenu – añade un menú contextual configurable. El menú contextual se define mediante un parámetro “contextmenu” cuyo valor es una lista de elementos de menú. Ejemplo:
  • directionality – Permite el tratamiento de texto en idiomas que se escriben de derecha a izquierda (controles en la barra de herramientas: ltr rtl)
  • emoticons – Permite insertar emoticonos (control en la barra de herramientas: emoticons)
  • example – plugin de ejemplo que se puede utilizar para desarrollar un nuevo plugin
  • example_dependency – plugin de ejemplo que depende de otro plugin
  • fullpage – Permite editar documentos con encabezamiento y cuerpo (control en la barra de herramientas: fullpage)
  • fullscreen – Permite cambiar el editor a modo pantalla completa (control en la barra de herramientas: fullscreen)
  • hr – Permite añadir una barra horizontal (control en la barra de herramientas: hr)
  • image – Permite añadir a la barra de herramientas un botón “Insertar Imagen”. Tiene tres opciones:
    • image_list
    • image_advtab
    • image_class_list
  • importcss – permite importar reglas de estilo desde el fichero especificado en el parámetro “content_css”
  • insertdatetime – Añade un control para insertar la fecha y hora
  • layer – añade controles para el manejo de capas. Sólo funciona en algunos navegadores, y es posible que sea eliminado en futuras versiones de TinyMCE
  • legacyoutput – genera elementos HTML tales como <font>,<b>,<i>,etc., que ya no forman parte de las especificaciones XHTML y HTML5 (puede ser util para enviar el resultado a un cliente de correo, o a Flash)
  • link – Añade controles link/unlink para insertar/eliminar enlaces en texto e imágenes
  • lists – Hace más compatible con distintos navegadores la generación de listas (<ul>, <ol>)
  • media – Permite añadir elementos de video y audio HTML5. Opciones:
    • media_alt_source
    • media_poster
    • media_dimensions
    • media_filter_html
  • nonbreaking – Añade un botón para insertar elementos &nbsp;
    Opciones:

    • nonbreaking_force_tab – Añade tres elementos &nbsp; cuando se pulsa el tabulador
  • noneditable
  • pagebreak – Añade un botón para insertar un código HTML definido por el parámetro pagebreak_separator. Ejemplo:
    pagebreak_separator:”<!– my page break –>”
    El CMS utilizado por el sitio deberá reconocer este código como un salto de página, y tenerlo en cuanta a la hora de generar el código HTML que entrega a los clientes.
  • paste – Pega contenidos copiados de word, después de limpiarlos de código HTML innecesario
  • preview – Abre una ventana de popup para previsualizar el contenido editado
  • print – Añade un botón “print” para imprimir el contenido
  • save – Permite añadir los botones “Guardar” y “Cancelar” para enviar al servidor el formulario en el que se encuentra el editor. Tiene tres opciones que se pueden configurar en la inicialización de tinymce:
    • save_enablewhendirty
    • save_onsavecallback
    • save_oncancelcallback
  • searchreplace – Añade un diálogo de búsqueda y sustitución de texto
  • spellchecker – Añade un botón para ejecutar un corrector ortográfico
  • tabfocus – Permite entrar y salir del editor pulsando el tabulador
  • table – Añade una serie de opciones para la edición de tablas HTML
  • template – Añade plantillas al editor
  • textcolor – permite establecer el color de texto y el color de fondo (controles en la barra de herramientas: forecolor backcolor)
  • textpattern – Sustituye determinados patrones de texto definidos en el parámetro textpattern_patterns. Los patrones por defecto son los utilizados en la sintaxis markdown (por ejemplo, sustituye **texto** por el texto en negrita)
  • visualblocks – Añade un botón y una entrada en el menú para hacer visibles los elementos de tipo bloque
  • visualchars – Hace visibles determinados caracteres tales como &nbsp;
  • wordcount – añade un contador de palabras al pie de la ventana del editor

Referencias

Sitio oficial de TinyMCE

 

 Publicado por en 2:57 pm

 Deja un comentario

(requerido)

(requerido)