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.
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:
Artículos relacionados:
Tags: Editor WYSIWYG, FCKeditor, JavaScript, librería, tutorial
[…] 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, […]
hoa alguien sabe como configurar el boton de guardar en el ckeditor q m poueda ayudar porfa se los agradecere mucho
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.