Posts Tagged ‘Editor WYSIWYG’

septiembre 1, 2009 1

CKEditor, la nueva versión de FCKEditor

By in Librerías

Tras varios años de desarrollo del editor FCKEditor han decidido rebautizarlo y rediseñarlo bajo un nuevo nombre. Han conseguido un editor más flexible, accesible y completamente Open Source.

CKEditor

Aunque solo le he echado un vistazo muy por encima tiene muy buena pinta. Habrá que probarlo y ver que tal se comporta y como de adaptable es a nuestras aplicaciones. Podemos ver las características para los usuarios finales y para los desarrolladores en los siguientes enlaces:

Se puede ver una demo del nuevo editor o descargarlo desde su página web.

Comparte esta entrada:
Delicious Digg Google Technorati Menéame Fresqui Reddit Facebook Twitter Yahoo! Buzz MySpace Email BarraPunto

Tags: , ,

julio 27, 2009 3

Tutorial de FCKeditor. Parte I.

By in JavaScript, Librerías

Hola a todos. Vamos a comenzar un tutorial sobre un editor WYSIWYG llamado FCKeditor. Para empezar vamos a ver un pequeño ejemplo que pasaré a explicar después.

FCKEditorEjemplo1.html:

<html>
<head>
<title>Ejemplo FCKEditor</title>
<script type="text/javascript" src="./fckeditor/fckeditor.js"></script>
</head>
<body>
<form action="form.php" method="post">
<script>
var oFCKeditor = new FCKeditor( 'FCKeditor1' ) ;
oFCKeditor.BasePath	= document.location.href.substring(0, document.location.href.lastIndexOf('/')) + "/fckeditor/";
oFCKeditor.Height	= 300 ;
oFCKeditor.Value	= '<p>Esto es un <strong>texto de ejemplo<\/strong>.<\/p>' ;
oFCKeditor.Create() ;
</script>
<input type="submit"/>
</form>
</body>
</html>

Lo primero que hacemos es incluir el script fckeditor.js. Este script se encuentra dentro de la carpeta fckeditor. A continuación creamos un formulario que será procesado por el script form.php y al que se le enviarán los datos mediante el método POST.

Después metemos algo de código JavaScript. Lo que hacemos es crear un objeto de la clase FCKeditor. Esto lo hacemos en la primera linea del script. A continuación configuramos el editor, indicándole la ruta base (oFCKeditor.BasePath), la altura (oFCKeditor.Height) y el contenido del editor (oFCKeditor.Value). Una vez hecho esto creamos el editor llamando al método Create.

A continuación, y ya fuera del script, ponemos un Submit para que envíe los datos al script encargado de procesar el formulario. Veamos el código de dicho script:

form.php:

<html>
<head>
<title>Ejemplo FCKEditor</title>
<script type="text/javascript" src="./fckeditor/fckeditor.js"></script>
</head>
<body>
<h1>C&oacute;digo del texto introducido</h1>
<pre>
<?php
	if (get_magic_quotes_gpc())
		echo htmlspecialchars(stripslashes($_POST['FCKeditor1']));
	else
		echo htmlspecialchars($_POST['FCKeditor1']);
?>
</pre>
</body>
</html>

Este script lo único que hace es mostrarnos el código del texto introducido en el editor.

Podéis ver un ejemplo del código aquí. Y como es costumbre descargaros el código de los ejemplos. Para poder ver el ejemplo tenéis que descargar el editor y ponerlo dentro de una carpeta llamada fckeditor.

Primer Ejemplo de FCKeditor

P.D.: Esta entrada me ha costado un poco, ha habido algunos problemas con el ejemplo, de modo que puede haber problemas al hacer que funcione el ejemplo. Si tenéis alguna duda podéis preguntar sin problema en los comentarios.

Comparte esta entrada:
Delicious Digg Google Technorati Menéame Fresqui Reddit Facebook Twitter Yahoo! Buzz MySpace Email BarraPunto

Tags: , , , ,

junio 12, 2009 2

Tutorial de TinyMCE. Parte II.

By in JavaScript, Librerías

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

Comparte esta entrada:
Delicious Digg Google Technorati Menéame Fresqui Reddit Facebook Twitter Yahoo! Buzz MySpace Email BarraPunto

Tags: , , ,

junio 10, 2009 7

Tutorial de TinyMCE. Parte I

By in JavaScript, Librerías

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).

Comparte esta entrada:
Delicious Digg Google Technorati Menéame Fresqui Reddit Facebook Twitter Yahoo! Buzz MySpace Email BarraPunto

Tags: , , , ,

junio 5, 2009 1

TinyMCE: Un editor WYSIWYG en JavaScript

By in JavaScript

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.

Comparte esta entrada:
Delicious Digg Google Technorati Menéame Fresqui Reddit Facebook Twitter Yahoo! Buzz MySpace Email BarraPunto

Tags: , ,