- Open Source
- Ligero de peso
- Ampliable mediante plugins
- Usable en todos los navegadores.
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