En la anterior parte del tutorial vimos como crear un editor sencillo con TinyMCE. Hoy vamos a ver algunas opciones más avanzadas, como los plugins o como tener distintos editores en una misma página.
Veamos el tercer ejemplo:
ejemploTinyMCE_3.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Tercer ejemplo con TinyMCE</title>
<script type="text/javascript" src="tiny_mce/tiny_mce.js"></script>
<script type="text/javascript" src="ejemploTinyMCE_3.js"></script>
<style>
#editor { width: 500px; height: 350px;}
</style>
</head>
<body onload="cargarTinyMCE();">
<h1>Tercer ejemplo con TinyMCE</h1>
<textarea id="editor"></textarea>
</body>
</html>
Es prácticamente idéntico al segundo ejemplo, con la salvedad de que se le ha añadido la propiedad id al tag textarea. Esto lo hacemos porque ahora vamos a seleccionar un textarea en concreto para que sea nuestro editor.
ejemploTinyMCE_3.js:
function cargarTinyMCE()
{
tinyMCE.init({
mode : "exact",
elements: "editor",
theme : "advanced",
plugins: "fullscreen, advlink, advimage",
theme_advanced_buttons1 : "bold, italic, underline, separator, justifyleft, justifycenter, justifyright, justifyfull ",
theme_advanced_buttons2 : "bullist,numlist,separator,outdent,indent,separator,undo,redo",
theme_advanced_buttons3 : "image, link, fullscreen",
theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align: "left" });
}
Ahora aparecen varias cosas nuevas. Aparecen dos opciones nuevas, elements y plugins. En este caso la opción mode tiene el valor exact, en lugar de textareas como tenía en los otros ejemplos. Bien, el modo exact le dice a TinyMCE que solo los textareas con los ids que aparecen en la opción elements serán nuestros editores WYSIWYG. Luego en la opción elements le hemos puesto solo editor. De esta forma solo el textarea con el id editor será transformado en un campo de texto enriquecido con las opciones indicadas. La opción elements puede contener varios ids separados por comas, de esta forma se aplicará a todos los textarea que tengan un id que aparezca en la lista.
La siguiente opción que vemos es plugins. Esta opción nos permite incluir plugins que añaden funcionalidades extra a nuestro editor. En este caso hemos añadido los plugins fullscreen, que permite que el editor ocupe toda el area del navegador; advlink, que nos presenta un dialogo avanzado para insertar enlaces y advimage que proporciona un dialogo más completo para incrustar imágenes. En la opción theme_advanced_buttons3 añadimos los botones image, link y fullscreen para poder ver las nuevas funcionalidades del editor.
Este debería de quedar tal que así:
Tercer ejemplo con TinyMCE
Para poder tener varios editores tenemos que tener varias llamadas a la función tinyMCE.init. Vamos a verlo con un ejemplo en el que tendremos un editor con dos barras y otro con una barra. Veamos el código:
ejemploTinyMCE_4.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Cuarto ejemplo con TinyMCE</title>
<script type="text/javascript" src="tiny_mce/tiny_mce.js"></script>
<script type="text/javascript" src="ejemploTinyMCE_4.js"></script>
<style>
#editor { width: 400px; height: 300px;}
#sencillo { width: 300px; height: 250px;}
</style>
</head>
<body onload="cargarTinyMCE();">
<h1>Cuarto ejemplo con TinyMCE</h1>
<textarea id="editor"></textarea><br/>
<textarea id="sencillo"></textarea>
</body>
</html>
Como se puede ver en la página hay dos textareas, uno con el id editor y otro con id sencillo.
ejemploTinyMCE_4.js:
function cargarTinyMCE()
{
tinyMCE.init({
mode : "exact",
elements: "editor",
theme : "advanced",
plugins: "fullscreen, advlink, advimage",
theme_advanced_buttons1 : "bold, italic, underline, separator, justifyleft, justifycenter, justifyright, justifyfull ",
theme_advanced_buttons2 : "bullist,numlist,separator,outdent,indent,separator,undo,redo",
theme_advanced_buttons3 : "image, link, fullscreen",
theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align: "left"
});
tinyMCE.init({
mode : "exact",
elements: "sencillo",
theme : "advanced",
theme_advanced_buttons1 : "bold, italic, underline, separator, justifyleft, justifycenter, justifyright, justifyfull ",
theme_advanced_buttons2 : "bullist,numlist,separator,outdent,indent,separator,undo,redo",
theme_advanced_buttons3 : "",
theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align: "left"
});
}
Ahora para que aparezcan dos editores distintos tenemos que hacer dos llamadas a tinyMCE.init, una por cada configuración que queramos, indicándole a que textarea, o a que textareas si tuviéramos varios con la misma configuración. Esto quedaría de la siguiente forma.
Cuarto ejemplo con TinyMCE
Como es habitual recomiendo consultar la documentación, de donde salen muchas ideas interesantes.
Y para finalizar los archivos con los ejemplo del tutorial (no incluye tinyMCE, que ya estaba en los ejemplos de la primera parte):
Ejemplos del tutorial de TinyMCE Parte II
Artículos relacionados:
Tags: Editor WYSIWYG, JavaScript, TinyMCE, tutorial
