FCKeditor (I Parte): Su Instalación

Luego de conocer los mejores editores wysiwyg on line vamos a tratar la instalación del FCKeditor en un formulario web, no sólo de un CMS, pués para estos ya existen los módulos (casos de mambo, drupal o phpnuke) o plugins (caso de wordpress, simpleCMS, etc, etc.). El proceso que vamos a ver es muy simple, pues el mismo script así lo ha previsto.

FCKeditor

FCKeditor se puede instalar bajo cualquier lenguaje del servidor (PHP, ASP, JSP, ColdFusion) o en todo caso bajo JavaScript. Ahora vamos a ver los dos tipos de instalación más usados.

Instalación con Javascript

Luego de descargar el editor, procedemos realizar lo siguiente:

1er paso

Creamos una carpeta bajo el nombre de FCKeditor (o el de tu gusto) donde colocaremos el codigo que viene en la carpeta editor (cuando lo descarguemos), con esto hecho procedemos a llamar al JavaScript, dentro de las etiquetas head colocamos: 

<script type="text/javascript" src="/FCKeditor/fckeditor.js"></script>

 2do paso

Ahora lo único que falta es crear el formulario

Método 1
Un primer metodo es ubicarnos dentro de la etiqueta body, en el lugar donde queremos que vaya el formulario y colocar lo siguiente:

<script type="text/javascript">
var oFCKeditor = new FCKeditor( 'FCKeditor1' ) ;
oFCKeditor.Create() ;
</script>

Método 2
El otro método consiste en reemplazar el Textarea de tu formulario ya existente, para esto debe tener un name o un id que lo individualice. El script quedaría de la siguiente forma:

<html>
<head>
<script type="text/javascript" src="/FCKeditor/fckeditor.js"></script>
<script type="text/javascript">
window.onload = function()
{
var oFCKeditor = new FCKeditor( 'MyTextarea' ) ;
oFCKeditor.ReplaceTextarea() ;
}
</script>
</head>
<body>
<textarea id="MyTextarea" name="MyTextarea">Este es <strong>el valor </strong> inicial</textarea>
</body>
</html>

3er paso

Finalmente lo probamos en el navegador y listo.

Instalación con PHP

A pesar de ser muy sencilla la instalación, cuando uno necesita aplicar el editor a dos textareas de una misma pagina, el javascript resulta complicado, pues habría que hacerle algunas modificaciones. Por lo que resulta mas práctico hacer la instalación con PHP.

1er Paso

De la misma manera que en el caso anterior, lo primero es hacer una llamada, en este caso, al archivo fckeditor.php, mediante un include() o un require_once() dentro de las etiquetas head del HTML.

El código es el siguiente:

<?php
include("FCKeditor/fckeditor.php") ;
?>

2do Paso

Estando integrados con la clase PHP del FCKeditor, ahora vamos crear las textareas, cuantas queramos en una misma pagina o en varias. Lo único que se debe hacer son las llamadas a las funciones, asignándoles en algunos casos sus identificadores o sus parámetros en otros.

El código comentado seria el siguiente:

<?php
//Asignamos el nombre del TexArea: FCKeditor1
$oFCKeditor = new FCKeditor('FCKeditor1') ;
//Definimos la ubicación de la carpeta madre del editor (puede variar)
$oFCKeditor->BasePath = '/FCKeditor/';
//Asignamos el valor inicial del textarea de tenerlo, suele ser una variable que recupere el contenido de la base de datos para modificarlo, en este caso es un texto de muestra
$oFCKeditor->Value = 'Default text in editor';
//Ancho del TextArea
$oFCKeditor->Width = '100%' ;
//Alto del TextArea
$oFCKeditor->Height = '200' ;
// Finalmente creamos el textarea con el editor, bajo los parametros ya dispuestos
$oFCKeditor->Create() ;
?>

El código completo sería el siguiente:

<?php
include("FCKeditor/fckeditor.php") ;
?>
<html>
<head>
<title>FCKeditor - Sample</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<form action="savedata.php" method="post">
<?php
    $oFCKeditor = new FCKeditor('nombre_del_textarea') ;
    $oFCKeditor->BasePath = 'fckeditor/';
    $oFCKeditor->Width  = '700' ;
    $oFCKeditor->Height = '500' ;
    $oFCKeditor->Create() ;
?>
<br />
<input type="submit" value="Submit">
</form>
</body>
</html>

Esto es suficiente para tener nuestro editor instalado y funcionando correctamente, en un artículo posterior veremos como personalizarlo a nuestro gusto, que herramientas tomar y de cuales prescindir, además de los pasos a seguir para adaptar el explorador de archivos e imágenes.

Ya lo solucion&eacut

Ya lo solucioné , sobraban las comillas en $descripcion;

Enviado por Gabi (no verificado) el Sáb, 05/27/2006 - 15:11.
Muy interesante. Sal

Muy interesante. Saludos.

Enviado por hugo (no verificado) el Lun, 06/12/2006 - 17:20.
hola, muchas gracias

hola, muchas gracias por el artículo, me ha servido muchisimo. Saludos.

Enviado por Hector (no verificado) el Mié, 06/14/2006 - 14:05.
Buenas, a ver si alg

Buenas, a ver si alguien me puede ayudar, eh instalado un programa llamado supernews que viene con el FCKeditor incorporado, lo que hice fue separarlo del directorio y ubicarlo en la raiz de mi servidor web, el problema es que no logro hacerlo andar desde entonces, eh leido el apunte de Balu, pero no logro entender como llamar al editor.Donde poner el codigo para llamarlo.Gracias.

Enviado por Remy (no verificado) el Lun, 06/26/2006 - 18:16.
mi duda es q mi serv

mi duda es q mi servidor es gratuito y no trabaaja con extenciones .js yo he resolvido mis problemas menores solo etiquetando con .php pero estoy es demasiado grande no hay otra fotma de conseguier q esto anda realmente me gusta mucho o 

Enviado por german (no verificado) el Jue, 06/29/2006 - 10:40.
Hola,Soy nuevo y est

Hola,Soy nuevo y estoy haciendo una prueba, me interesa mucho el tema sobre el FCKeditor, la opcion de registrarse en esta pagina da un error, y no se si por aki puedo realizar mis preguntas.Saludos,Arian

Enviado por Arian (no verificado) el Mar, 07/04/2006 - 04:57.
Hola Baluart,

Hola Baluart,  ante todo agradecido por ser  tan generoso con tus conocimientos,  mi pregunta es la siguiente estoy instalando una tienda con oscomerce 2.2 MS2 y quiero integrar en el index.php de esta tienda el fckeditor 2.3 es posible hacerlo y como? Muchas gracias... 

Enviado por Patrick (no verificado) el Jue, 07/13/2006 - 07:25.
Todos los que no pue

Todos los que no puedan configurar el administrador de imagenes de FCKeditor con PHP, acabo de hacerlo con la última versión 2.3.1. Pueden descargarlo desde este enlace.Descargar FCKeditor 2.3.1 para PHPEspero les sirva.Patrick, en el caso de los cms prefabricados es mejor buscar sus mods, o configurar uno.Saludos.

Enviado por Balú (no verificado) el Jue, 08/03/2006 - 10:55.
Cómo puedo adaptar F

Cómo puedo adaptar FCKEditor a phpnuke 7.9. para el módulo Content?

Enviado por YolandaGC (no verificado) el Vie, 08/11/2006 - 10:15.
Buenas mi problema e

Buenas mi problema es el siguiente.Como puedo validar un fckeditor lo hago de la siguiente forma:if (document.fcurso.justificacion.value.length==0){     alert("Tiene que escribir la justificación para la Acción Formativa.")     document.fcurso.justificacion.focus()     return 0;    }que es java script pero no se que hago mal, supogo que en la creacion del fckeditor se me olvida algo:  <div id="izquierdad">Justificación:<?php$sBasePath = $_SERVER['PHP_SELF'] ;$sBasePath =  '../../FCKeditor/' ;$oFCKeditor = new FCKeditor('justificacion') ;$oFCKeditor->BasePath    = $sBasePath ;$oFCKeditor->Value        = 'Justificación de la Acción Formativa.' ;$oFCKeditor->Create() ;?></div>esta es la parte de html donde creo el fckeditor, como se evalua el contenido de un fckeditor, please no se que hacer ya. Gracias 

Enviado por Antonio Rueda (no verificado) el Mié, 08/16/2006 - 12:08.
Antonio, descarga la

Antonio, descarga la configuración que publiqué hace poco, te será de ayuda. Fijate en el comentario 40.Por otra parte a que te refieres con justificar el fckeditor.Saludos.

Enviado por Balú (no verificado) el Mar, 08/22/2006 - 20:55.
Hola a todos, yo qui

Hola a todos, yo quisiera saber si es posible cambiar el color de fondo del campo de edici

Enviado por Daniel (no verificado) el Dom, 09/17/2006 - 17:34.
Buenas, baje la vers

Buenas, baje la version configurada del FCKeditor y funciono muy bien, ahora tengo un pequeño problema al respecto... Uso el editor para el env

Enviado por Zandro (no verificado) el Mar, 10/17/2006 - 07:18.
Hola Zandro, no s&ea

Hola Zandro, no sé por qué, yo no tuve ese problema cuando instalé el FCKeditor. Por lo que la soluci

Enviado por Bal (no verificado) el Mar, 10/17/2006 - 12:18.
Buenas cuando dices:

Buenas cuando dices: 1er Paso De la misma manera que en el caso anterior, lo primero es hacer una llamada, en este caso, al archivo fckeditor.php, mediante un include() o un require_once() dentro de las etiquetas head del HTML. El c

Enviado por g0nz4 (no verificado) el Mié, 10/18/2006 - 02:37.
Gonz4 me refiero al

Gonz4 me refiero al archivo fckeditor.php, y lo insertas en la p

Enviado por Bal (no verificado) el Mié, 10/18/2006 - 11:44.

¿Donde inserto la linea include("FCKeditor/fckeditor.php") ;  para que al meter una noticia nueva salga el editor, pq no se donde he de meter esa line en que archivo en concreto? Saludos y gracias

Enviado por g0nz4 (no verificado) el Jue, 10/19/2006 - 00:39.
HOla Balu... excelen

HOla Balu... excelento este tema....Mira que estoy tratando de validar un texto que esta dentro del FCK  pero no me funciona .. lo hago con java script como si fuera un campo normal de un formulario pero no coje.... arriba estube biendo que tratan el tema pero no encuentro solucion....

Enviado por Jose Luis S. (no verificado) el Lun, 10/23/2006 - 11:38.
HOla Balu... excelen

HOla Balu... excelento este tema....Mira que estoy tratando de validar un texto que esta dentro del FCK  pero no me funciona .. lo hago con java script como si fuera un campo normal de un formulario pero no coje.... arriba estube biendo que tratan el tema pero no encuentro solucion....

Enviado por Jose Luis S. (no verificado) el Lun, 10/23/2006 - 11:38.
una consulta miren s

una consulta miren soy novato en php  genere el archivo ingresar.php<?php include("FCKeditor/fckeditor.php") ; ?> <html> <head> <title>FCKeditor - Sample</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> <form action="savedata.php" method="post"> <?php     $oFCKeditor = new FCKeditor('variable') ;    $oFCKeditor->BasePath = 'fckeditor/';    $oFCKeditor->Width  = '700' ;    $oFCKeditor->Height = '500' ;    $oFCKeditor->Create() ;?> <br /> <input type="submit" value="Submit"> </form> </body> </html>y despues genero el otro savedata.php<? echo $variable ?>pero no me deja el formato y las imagenes no me las muestra como puedo mostrar mi variable para que muestre el contenido en el savedata.php

Enviado por aLEJANDRO (no verificado) el Vie, 11/10/2006 - 06:50.
Hola Balu, Ten

Hola Balu,  Tengo dos archivos .php, el primero es donde esta el formulario q contiene el fckeditor, y el segundo es a donde lo manda el metodo POST del formulario, ahora, no se como pasar la variable del textArea (q es donde esta toda la informacion escrita en el fckeditor, si entendi bien) a ese ultimo archivo q es donde hago una consulta para introducirlo en la BD, como hago eso amigo????  Uso php/mysqlGracias.     

Enviado por Arian (no verificado) el Mié, 12/20/2006 - 19:30.
Hola Balu, Ten

Hola Balu,  Tengo dos archivos .php, el primero es donde esta el formulario q contiene el fckeditor, y el segundo es a donde lo manda el metodo POST del formulario, ahora, no se como pasar la variable del textArea (q es donde esta toda la informacion escrita en el fckeditor, si entendi bien) a ese ultimo archivo q es donde hago una consulta para introducirlo en la BD, como hago eso amigo????  Uso php/mysqlGracias.     

Enviado por Arian (no verificado) el Mié, 12/20/2006 - 20:09.
Ya amigo Balu, desp

Ya amigo Balu, despues de romperme la cabeza di con la solucion, jeje

Enviado por Arian (no verificado) el Mié, 12/20/2006 - 20:55.
Balu: Como puedo ca

Balu: Como puedo cambiar el color del borde de una tabla usando PKCEditor. Saludos

Enviado por Jorge (no verificado) el Vie, 12/22/2006 - 12:40.
Hola Jorge, ahora no

Hola Jorge, ahora no recuerdo si se puede hacer directamente desde el editor html, sin embargo, puedes poner vista "c

Enviado por Bal (no verificado) el Vie, 12/22/2006 - 18:38.
Hola: tengo un peque

Hola: tengo un pequeño problema instalo el fckeditor y solo me funciona en Mozilla Firefox y no funciona en IE 6.0.2. En IE 6.0.2 aparece como si estubiera inabilitado ademas las ventanas de imagen y links no se puede ingresar en el servidor remoto.

Enviado por Andev (no verificado) el Vie, 01/26/2007 - 14:51.
Hola una acotacion m

Hola una acotacion mas sobre el mensaje. La aplicacion es trabajado con PHP + Postgres y el manejado de plantillas Smarty

Enviado por Andev (no verificado) el Vie, 01/26/2007 - 14:54.
Un error en IE dice:

Un error en IE dice:'FCK.Editor.Document,body'  es nulo o no es un objeto

Enviado por Andev (no verificado) el Vie, 01/26/2007 - 15:08.
Hola Andev,

Hola Andev, ¿c

Enviado por Bal (no verificado) el Vie, 01/26/2007 - 15:32.
Ya borre los tempora

Ya borre los temporales pero nada no se q puede suceder. la aplicacion la inserto con: {fckeditor Value="$contenido" InstanceName="contenido" ToolbarSet="Custom"} desde la plantilla html.Pero en otras aplicaciones funcionaba bien solo que era una version anterior a la FCKEditor 2.3.2.Pues utilizo el FCKeditor 2.3.2 que contiene nuevas actualizaciones. 

Enviado por Andev (no verificado) el Vie, 01/26/2007 - 16:50.

Deja tu comentario

El contenido de este campo se mantiene privado y no se mostrará públicamente.
  • Las direcciones de las páginas web y las de correo se convierten en enlaces automáticamente.
  • Etiquetas HTML permitidas: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Saltos automáticos de líneas y de párrafos.

Más información sobre opciones de formato