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.

Artículos relacionados:

Zemanta

Artículos relacionados:

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

Tags: , , , ,

3 Responses to “Tutorial de FCKeditor. Parte I.”

  1. Tutorial de CKEditor. Parte I. | mjcarrascosa.com dice:
    16/11/2009 a las 22:09

    […] ya bastante tiempo se comenzó en este blog un tutorial sobre FCKEditor, uno de los muchos editores WYSIWYG que hay, pero se dejó abandonado. Varias fueron las razones, […]

  2. arturo dice:
    01/12/2009 a las 01:56

    hoa alguien sabe como configurar el boton de guardar en el ckeditor q m poueda ayudar porfa se los agradecere mucho

  3. Manuel Jesús Carrascosa de la Blanca dice:
    01/12/2009 a las 02:39

    Para que el botón de guardar se vea activo el textarea debe estar dentro de un formulario:

    <form method=”post” action=”save.php”>
      <textarea name=”editor”></textarea>
    </form>

    Además, debes de haber añadido el botón de guardar. Puedes ver como se configuran los botones aquí:

    Tutorial de CKEditor. Parte II.

    Una vez hecho esto el botón de guardar actua como un submit, aunque se pueden hacer varias cosas para capturar el evento y realizar otras tareas.

Leave a Reply