mjcarrascosa.com » TinyMCE http://mjcarrascosa.com Desarrollo web y otras hierbas Fri, 08 Jul 2011 07:41:10 +0000 en hourly 1 Tutorial de TinyMCE. Parte III. http://mjcarrascosa.com/tutorial-de-tinymce-parte-iii/ http://mjcarrascosa.com/tutorial-de-tinymce-parte-iii/#comments Wed, 17 Jun 2009 05:01:02 +0000 Manuel Jesús Carrascosa de la Blanca http://mjcarrascosa.com/?p=177 Hoy vamos a ver dos propiedades muy interesantes para extender los diálogos de enlaces y de imágenes. Estas propiedades son external_link_list_url y external_image_list_url. Estas propiedades nos permiten añadir a los diálogos una lista de enlaces y de imágenes en un archivo externo. Este archivo contendrá código en JavaScript donde se define un array con los enlaces y las imágenes. Veamos como quedaría el código de nuestro quinto ejemplo:

ejemploTinyMCE_5.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>Quinto ejemplo con TinyMCE</title>
<script type="text/javascript" src="tiny_mce/tiny_mce.js"></script>
<script type="text/javascript" src="ejemploTinyMCE_5.js"></script>
<style>
#editor { width: 700px; height: 550px;}
</style>
</head>
<body onload="cargarTinyMCE();">
<h1>Quinto ejemplo con TinyMCE</h1>
<textarea id="editor"></textarea><br/>
</body>
</html>

ejemploTinyMCE_5.js:

function cargarTinyMCE()
{
	tinyMCE.init({
		mode : "exact",
		elements: "editor",
		theme : "advanced",
		plugins: "fullscreen, advlink",
		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",
		external_link_list_url: "ejemploTinyMCE_5_links.js",
		external_image_list_url: "ejemploTinyMCE_5_images.php"
	});

  }

Se puede observar que se han añadido las dos opciones mencionadas. También vemos que en el caso de external_image_list_url se ha puesto como valor un archivo PHP. Esto es así porque se puede generar esta lista a partir de un script PHP, dando de este modo un número infinito de posibilidades. Esto también se puede hacer con la opción external_link_list_url. Veamos el código de los archivos:

ejemploTinyMCE_5_links.js:

var tinyMCELinkList = new Array(
	// Nombre, URL
	["Moxiecode", "http://www.moxiecode.com"],
	["mjcarrascosa.com", "http://mjcarrascosa.com"],
	["Google", "http://www.google.com"]
);

En el archivo se define un array llamado tinyMCELinkList. Cada elemento es a su vez un array con dos elementos, el primero el nombre de la URL (el que aparecerá en la lista) y el segundo la URL en si.

ejemploTinyMCE_5_images.php:

<?php

$dir = opendir(dirname(__FILE__).'/images');

$salida = "var tinyMCEImageList = new Array(\n";
$salida.= "//Nombre, URL\n";

$imagenes = array();
while(($imagen = readdir($dir)) != false)
{
	if($imagen != '.' && $imagen != '..')
	{
		$imagenes[] = '["'.$imagen.'", "images/'.$imagen.'"]';
	}
}

$salida .= join(",\n", $imagenes);
$salida .= ');';
header('Content-type: text/javascript');
echo $salida;
?>

Este archivo nos genera un array llamado tinyMCEImageList. En este array cada elemento es también un array con dos elementos, el primero el nombre de la imagen y el segundo la URL de esta. El script lo que hace es buscar todos los archivos de la carpeta images y meterlos en el array. También enviamos la cabecera Content-Type con el valor text/javascript, para que el navegador sepa que lo que recibe es código con JavaScript. El resultado de ejecutar este script es:

var tinyMCEImageList = new Array(
//Nombre, URL
["imagen1.jpg", "images/imagen1.jpg"],
["imagen2.jpg", "images/imagen2.jpg"],
["imagen3.jpg", "images/imagen3.jpg"]);

Con esto termina la tercera parte de este tutorial. Para finalizar el código de los ejemplos:

Ejemplos del tutorial de TinyMCE Parte III

No que decir tiene que cualquier duda se puede preguntar en los comentarios.

]]> http://mjcarrascosa.com/tutorial-de-tinymce-parte-iii/feed/ 3 Tutorial de TinyMCE. Parte II. http://mjcarrascosa.com/tutorial-de-tinymce-parte-ii/ http://mjcarrascosa.com/tutorial-de-tinymce-parte-ii/#comments Fri, 12 Jun 2009 02:47:21 +0000 Manuel Jesús Carrascosa de la Blanca http://mjcarrascosa.com/?p=133 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

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

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

]]> http://mjcarrascosa.com/tutorial-de-tinymce-parte-ii/feed/ 1 Tutorial de TinyMCE. Parte I http://mjcarrascosa.com/tutorial-de-tinymce-parte-i/ http://mjcarrascosa.com/tutorial-de-tinymce-parte-i/#comments Tue, 09 Jun 2009 23:41:48 +0000 Manuel Jesús Carrascosa de la Blanca http://mjcarrascosa.com/?p=102 Hace poco daba por aquí una breve descripción de TinyMCE. Vamos a ver ahora un breve tutorial sobre este excelente editor WYSIWYG.

Para empezar veamos un ejemplo básico:

ejemploTinyMCE_1.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>Primer ejemplo con TinyMCE</title>
<script type="text/javascript" src="tiny_mce/tiny_mce.js"></script>
<script type="text/javascript" src="ejemploTinyMCE_1.js"></script>
</head>
<body onload="cargarTinyMCE();">
<h1>Primer ejemplo con TinyMCE</h1>
<textarea></textarea>
</body>
</html>

En el head de la página cargamos dos scripts, el primero es el script de TinyMCE y el segundo es un script propio donde tenemos una función (cargarTinyMCE) que se encarga de que aparezca el editor. En el evento onload  de la página llamamos a esta función. Como se puede ver en el body aparece un encabezado con el título y un textarea.

El código de la función cargaTinyMCE es:

ejemploTinyMCE_1.js:

function cargarTinyMCE()
{
	tinyMCE.init({
		mode : "textareas",
		theme : "simple"
	});
  }

Con este pequeño trozo de código hacemos que aparezca el editor. Este editor se vería de la siguiente forma:

Primer Ejemplo con TinyMCE

Primer Ejemplo con TinyMCE

Vamos ahora a tocar un poco el código de la función para que varie un poco el aspecto. En este ejemplo no incluyo el archivo HTML porque es muy parecido al primero (aunque si se incluye en el ZIP).

ejemploTinyMCE_2.js:

function cargarTinyMCE()
{
	tinyMCE.init({
		mode : "textareas",
		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"
	});
  }

En este caso la opción theme tiene el valor advanced, de esta forma podemos adaptar el editor a nuestras necesidades. Lo siguiente que vemos es que se han añadido las opciones theme_advanced_buttons1, theme_advanced_button2 y theme_advanced_buttons3 (theme_advanced_buttons<1-n>). Con estas opciones podemos indicar que botones van a aparecer en cada una de las barras. Si dejamos esta opcion vacia, como en el ejemplo con theme_advanced_buttons3, no aparece la barra. En la documentación de TinyMCE están los botones que tenemos disponibles.

Tenemos también las opciones theme_advanced_toolbar_location y theme_advanced_toolbar_align. Con la primera indicamos la posicion de la barra, en nuestro caso arriba (top), y la alineación de esta, en este ejemplo a la izquierda (left).

El editor quedaría:

Segundo ejemplo con TinyMCE

Segundo ejemplo con TinyMCE

Bien, esto es todo de momento. No viene mal echarle un ojo a la documentación de TinyMCE, donde se puede consultar mucha información sobre este editor.

Y como siempre el zip con los ejemplos de este tutorial (incluye el editor TinyMCE):

Ejemplos del tutorial de TinyMCE Parte I

Y la página de TinyMCE (enlace).

]]> http://mjcarrascosa.com/tutorial-de-tinymce-parte-i/feed/ 6 TinyMCE: Un editor WYSIWYG en JavaScript http://mjcarrascosa.com/tinymce-un-editor-wysywyg-en-javascript/ http://mjcarrascosa.com/tinymce-un-editor-wysywyg-en-javascript/#comments Fri, 05 Jun 2009 08:57:25 +0000 Manuel Jesús Carrascosa de la Blanca http://mjcarrascosa.com/?p=66 TinyMCE es un editor WYSIWYG hecho en JavaScript. Es el editor que usa WordPress y que también puede ser usado por otros gestores de contenidos.

Algunas de sus caracteristicas más destacables son:

  • Facilidad para integrarlo. Es realmente sencillo integrar TinyMCE en cualquier página.
  • Personalizable. Se puede personalizar que botones y herramientas tendrá nuestro editor, así como las posiciones de estas.
  • Open Source. Es un editor de código abierto.

Próximamente realizaré un artículo más amplio sobre este editor.

]]> http://mjcarrascosa.com/tinymce-un-editor-wysywyg-en-javascript/feed/ 1