Un editor de textos web: TinyMCE

TinyMCE es una aplicación escrita en Javascript que nos permite crear un editor de textos en nuestra web con una gran variedad de personalización y con características (que lo hacen interesante para usarlo en sistemas de gestión de contenido web), como pueden ser:
  • Open Source
  • Ligero de peso
  • Ampliable mediante plugins
  • Usable en todos los navegadores.
En nuestro caso, vamos a configurarlo de tal manera que tenga el aspecto de un editor de textos simple cubriendo las funcionalidades básicas del editor.

El primer paso será descargarlo de la web oficial y descomprimirlo en el disco duro. Crearemos un archivo de extensión html en la carpeta descomprimida con el siguiente código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Ejemplo de un editor de textos Web simple con TinyMCE</title>

<!-- TinyMCE -->

<script type="text/javascript" src="jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
	tinyMCE.init({
		mode : "exact",
		elements : "editor_texto",
		theme : "advanced",
		theme_advanced_buttons1:"bold,italic,underline,|,undo,redo,|,bullist,numlist",
		theme_advanced_buttons2:"",
		theme_advanced_buttons3:""

	});
</script>
<!-- /TinyMCE -->

</head>
<body>

<h3>Editor de textos Web</h3>

<textarea id="editor_texto" name="editor_texto" style="width: 30%;">Texto de prueba</textarea>

</body>
</html>
Si visualizamos el archivo en cualquier navegador web, podemos observar que tenemos un editor de textos que podemos usar en nuestra página web. A continuación explicaremos las opciones de configuración que hemos usado:
  • mode "exact" y elements "editor_texto": con estas dos líneas indicamos que queremos aplicar el editor de textos sólo al elemento de la web de identificador editor_texto
  • theme "advanced": elegimos utilizar el tema avanzado del editor para poder seleccionar los botones concretos que queremos que aparezcan mediante theme_advanced_buttons1, theme_advanced_buttons2 y theme_advanced_buttons3 donde seleccionaremos dentro de las tres posibles filas de botones del editor, que botones aparecerán. En este caso negrita, cursiva, subrayado, una separación, deshacer, rehacer, una separación, lista y lista numerada respectivamente.

Comentarios

Sin comentarios
Ha habido un error en el envío
Comentario enviado. Será revisado por la moderación antes de ser publicado.

Deja tu comentario

Tu nombre:
Tu email:
Tu comentario:
Nuestra página web utiliza cookies propias y de terceros, para realizar el análisis de la navegación de los usuarios y así poder mejorar nuestros servicios. Si continúas navegando, consideramos que aceptas su uso. Puedes cambiar la configuración u obtener más información aquí