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ó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.
Tags: Editor WYSIWYG, FCKeditor, JavaScript, librería, tutorial
