FCKeditor (I Parte): Su Instalación

baluart3 Agosto 2005 - 12:00am 133 comentarios
Enviar por Email Imprimir

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.

Comentarios

Imagen de WebMaster
WebMaster

Hola Balu: He prestado atención al artículo sobre el FCK Editor y me ha parecido interesante. Necesito explicación sobre la manera de utilizar este editor para la actualización del contenido de las diferentes páginas de un sitio web. ¿Cómo debo configurarlo? ¿cómo puedo acceder a través de él a las páginas del sitio? ¿Cuáles detalles debo incorporar a las páginas del sitio para que sean reconocidas por el editor?... En fin. Me gustaría conocer tus sugerencias al respecto. Gracias de antemano.

Imagen de Balú 2

FCKeditor es una herramienta que te permite escribir código html de una manera gráfica. Sin embargo, este editor no es un CMS (Como por ejemplo Mambo, phpNuke, WordPress, etc.) o uno creado por ti mismo, como es el caso de BaluArt, por este motivo tienes que hacer uso de algún CMS y recién a éste añadirle el FCKeditor.

Los pasos para configurarlo, ya están dichos en este artículo. Además, he publicado dos posts que explican cómo personalizar el editor, cómo configurar su explorador de imágenes y cómo hacer uso de CSS, quedando pendiente la configuración de la vista previa. En este enlace tienes los links a estos artículos.

Por otra parte, como mencionaba antes, para acceder a las diferentes páginas debes hacer uso de algún CMS, los cuales son muy facil de instalar y usar.

Espero que lo dicho te sea de utilidad, saludos.

Imagen de chefo
chefo

hola Balu. Lo primero felicitarte por tu espacio que me parece muy interesante. He seguido las instrucciones que has dado con respecto al FCK y sin problemas. Yo no trabajo CMS, trabajo directamente las webs en php/Mysql y a la hora de subir los contenidos por medio del editor FCK  y mostrarlos en la web el resultado es perfecto. Cuando edito los artículos para modificar algo de ellos lo hago mostrando un listado con los mismos y dando opción a modificarlos o borrarlos. La cuestión es que paso las variables por get y las coge todas (incluida la del artículo) pero en la lista muestra el texto del artículo mientras que las imágenes las muestra en la caja donde posteriormente se edita el artículo para su modificación.El artículo está en un campo text. He probado con un campo blob y el resultado es el mismo. ¿Puede ser que debiera usar otro gestor de bases de datos como postgree o algo así?¿Será porque, como comentas, es necesario integrar el FCK en un CMS?Bueno, espero haberme explicado. Muchas gracias y un saludo.

Imagen de Balú

Que tal Chefo. Te respondo las preguntas, luego trato de explicar lo que te he entendido y luego te digo mi opinión. ¿Puede ser que debiera usar otro gestor de bases de datos como PostgreSQL o algo así? Para empezar PHP y MySQL me parece que aún es la mejor combinación, por lo cual no te recomiendo todavía usar PostgreSQL sobretodo porque no hay tanta información al respecto. ¿Será porque, como comentas, es necesario integrar el FCK en un CMS? Por lo que veo tu creación es un CMS, no uno prefabricado, pero con el cual puedes perfectamente manejar los contenidos de tu web. Ahora, me explico a ver si te he entendido bien. Primero, tú haz creado, entre otros, dos campos distintos en tu tabla de la BD: uno para el tenor del artículo y otro para las imágenes. Segundo, tu sistema funciona correctamente, puedes recuperar los valores de las variables que envías, Tercero, tu problema consiste en que deseas unir el texto y la imagen en una sola área de texto del formulario  para editarlas juntas, puesto que por ahora las imágenes las muestra en una caja distinta. En mi opinión, no es necesario que las imágenes estén en  un campo blob de la tabla, puede ser text. Por ello, te recomiendo que las rutas a las imágenes las insertes en el mismo campo text donde almacenas el tenor del artículo. Luego cuando recuperes el texto en tu formulario de edición, la imagen aparecerá junto con el texto cuando uses FCKeditor Es decir, si quieres editar las imágenes y el texto en una  área de texto del formulario con FCKeditor, entonces el área debe mostrar una sola variable: la que tenga como  valor el  tenor del artículo. Saludos.

Imagen de Chefo
Chefo

Hola balu. Lo primero muchas gracias por contestarme. De momento ya me has aclarado un par de dudas importantes.No existen dos campos diferentes para imágenes y texto.  El textarea manda sólo una variable y tanto imágenes como texto van a un sólo campo llamado artículo y que es de tipo text. cuando consulto el contenido de dicho campo en el phpmyadmin está todo correcto (las imágenes entre los correspondientes tags)Además hay otros campos como título, autor, etc.como te digo a la hora de mostrar el resultado en la web es perfecto. El problema es que he hecho un formulario que lista todos los registros dando la opción de borrarlos o modificarlos y a través de un enlace llamado "modificar" le paso las variables correspondientes a los campos que se pueden modificar a un formulario que recupera esas variables para su modificación.Pero cuando le paso la variable correspondiente al artículo (en el que hay tanto imágenes como texto) muestra el texto en el listado junto al enlace como un vínculo al formulario de modificación. Y en el fckeditor en el tendría que recuperar esa variable para su edición aparece el icono de imagen junto a la expresión </body (así, sin cerrar) y el texto no aparece, lo cual no resulta muy práctico, claro.La cuestión es que me has aclarado que no es un problema del gestor de base de datos y que el fckeditor es válido en este sistema y te lo agradezco un montón.Voy a probar pasando las variables por medio de un input hidden en lugar de por get a ver que pasa y te comentaré si me ha funcionado.Bueno, pues reitero el agradecimiento y recibe saludos deChefo.

Imagen de zell

Hola buenas...Tengo Drupal con FCKEditor instalado, pero aún no funcionando... saben en que archivo colocar el siguiente código?:<?php include("FCKeditor/fckeditor.php") ; ?>

Imagen de Balú

Hola Zell, el include se pone en el archivo que contiene el script que muestra el campo de texto del formulario. Pero si usas drupal, te recomiendo que descargues el módulo "FCKeditor para Drupal" y lo instales.. es más práctico. Este es el enlace:FCKeditor for DrupalSaludos. 

Imagen de principiante
principiante

hola Como estas te queria pedir una gran ayuda :es sobre el envio del formulario con fckedit , yo primero antes de enviarlo queria chequearlo que el text area ( como se llame FCKedit1 ) no sea vacio , si bien  se muestra un valor por defecto pero si el usuario me borra el valor y no ingresa nada y apreta el boton enviar formulario quiero que diga que el texto no puede ser vacio.Espero que me puedas dar una manito.Gracias y esta muy buena la pagina.

Imagen de Balú

Bienvenido Principiante. Para lo que pides te recomiendo dos cosas:

  1. Para mostrar el mensaje de advertencia al usuario puedes escribir entre las etiquetas <head> de tu página un pequeño JavaScript. Puedes buscar en google lo referente a validación de formularios y te dejo este enlace.
  2. Luego, en tu base de datos MySQL. Tienes que configurar el campo donde van a insertarse los textos de los comentarios como "NOT NULL". De esta manera, en caso el usuario tenga desactivado el JavaScript, la base de datos no procesara un valor vacío.

Saludos.

Imagen de Cecilia
Cecilia

Hola Balu....Mira tengo dos problemas...
Con respecto a este editor.....
Por ej. inserte este editor con el metodo javscript
es para un form donde el usuario llena en el textarea la info que aparecera en la seccion...pero luego al procesar con otro archio la info que se mostrara en la seccion, todo el formato que aplico en el textarea, por ej. letra en negrita y viñetas, no las visualizo luego al mostrarse esta infor..
Tenes idea por qeu sera...
SALUDOS

Imagen de Alvaro Ravanal
Alvaro Ravanal

Insertar y Editar PHP:
-----CODIGO PARA INSERTAR---
<?php
$oFCKeditor = new FCKeditor('variable') ;
$oFCKeditor->BasePath = 'fckeditor/';//direccion donde instalaste el Fckeditor.
$oFCKeditor->Value = "$variable" ;
$oFCKeditor->Width = '700' ;
$oFCKeditor->Height = '500' ;
$oFCKeditor->Create() ;
?>
---CODIGO PARA EDITAR ACTUALIZAR DESDE MYSQL----
<?php
$variable = $row_tabla['variable'];
$oFCKeditor = new FCKeditor('variable') ;
$oFCKeditor->BasePath = 'fckeditor/';//direccion donde instalaste el Fckeditor.
$oFCKeditor->Value = "$variable" ;
$oFCKeditor->Width = '700' ;
$oFCKeditor->Height = '500' ;
$oFCKeditor->Create() ;
?>

le di muchas vueltas, pero así está funcionando.
Saludos

Imagen de maxi
maxi

Hola amigo muy bueno lo que escribiste pero tenes idea de como agregar codigo de un lenguaje tipo como cuando vos escribis en los foros que te la posibilidad de ingresar codigo.

Imagen de Geovanny Maldonado

Para insert o update con base de datos.
<?php
$oFCKeditor = new FCKeditor('variable') ;
$oFCKeditor->BasePath = 'fckeditor/';//direccion donde instalaste el Fckeditor.
$oFCKeditor->Value = "$variable" ;
$oFCKeditor->Width = '700' ;
$oFCKeditor->Height = '500' ;
$oFCKeditor->Create() ;
?>
Codigo 100% verificado y funcionado.

Imagen de sergio
sergio

Hola y gracias por la ayuda, me funciona perfecto para insertar, pero al quere editar no puedo mostrar $row['descripcion']

$oFCKeditor = new FCKeditor($row['descripcion']);
$oFCKeditor->BasePath = 'fckeditor/';
$oFCKeditor->Width = '600' ;
$oFCKeditor->Height = '500' ;
$oFCKeditor->Create() ;

completo:
<?php
//recibimos la variable id enviada en el enlace por GET
$id=$_GET[id];
//hacemos las consultas
$result=mysql_query("select id,titulo,telefono,operacion,banos,habitaciones,ciudad,provincia,mtscuadrados,precioventa,preciopesos,preciorenta,tipoinmueble,descripcion,fechaingreso,imagen,imagen1,imagen2 ,referencia from propiedades where id='$id'"
,$enlace);
//Una vez seleccionados los registros los mostramos para su edición
echo '';
include("fckeditor/fckeditor.php") ;
while($row=mysql_fetch_array($result)){

echo '

TITULO
TELEFONO
OPERACION

BAÑOS
HABITACIONES
CIUDAD

PROVINCIA
m2
PRECIO EN DOLARES

PRECIO $
PRECIO ALQUILER
TIPO DE INMUEBLE

DESCRIPCION
FECHA DE INGRESO
 

$oFCKeditor = new FCKeditor($row["descripcion"]);
$oFCKeditor->BasePath = "fckeditor/";
$oFCKeditor->Width = "600" ;
$oFCKeditor->Height = "500" ;
$oFCKeditor->Create() ;

 

IMAGEN
IMAGEN 1
IMAGEN 2

REFERNCIA
 
 

';
}
mysql_free_result($result);
mysql_close($enlace);

Imagen de Anonymous

buenas a todos. tengo un problema con el fckeditor. resulta que yo estoy enviando el nombre del fckeditor en el ajax. pero no me reconoce el nombre del fckeditor. alguien me puede decir la solucion. llevo horas tratando de encontrar una manera de que se envie el nombre del textarea al ajax.

Imagen de Alex
Alex

Hola de nuevo Balu, tengo una pregunta y un problema. La pregunta es ¿como configuro el corrector ortografico? por lo que vi ay que descargarlo, pero, ¿existe otra forma, que me recomiendas?, y el problema es al pegar contenido copiado desde word, con el texto funciona exelente, pero al insertar tablas (de cualquier tamaño) no lo hace en la BD a menos que marque la opcion de la ventana de pegado "Remover definiciones de estilo", asi si inserta en la BD. No se si es problema de el tipo de campo(que ya he probado con todos) de la BD o del Fk(que es exelente). Gracias por tu respuesta!

Imagen de Ricardo Avalos
Ricardo Avalos

Balu,

Ante todo felicitaciones por tu gran tutorial, gracias a él pude terminar de instalar el fckeditor que se me estaba resistiendo.

Ahora tengo un problema que no se como solucionar. Cuando lo cargo para editar un articulo guardado en mi base de datos (que viene como html) en vez de interpretar elcodigo html me muestra el html tal cual:
Ej: "BasePath = $sBasePath ;
$oFCKeditor->Width = '465' ;
$oFCKeditor->Height = '300' ;
$oFCKeditor->Value = "$texto_noticia";
$oFCKeditor->Create() ;

Que estoy haciendo mal??

Imagen de Claudio Gonzalez

Hola Balu ¿Que tal?

Instale FCKeditor en PHP y lo utilizo en mi pagina para enviar mensaje a mis afiliados, y me he dado cuenta en las pruebas que he efectuado, que al llegar los mensajes a las casillas de correo, sale el código html, y no sé como solucionarlo,

Ejemplo:
Probando envio de mensajes desde Ganancias Globales

Como se puede ver en el código muestra un \ entre href=\"http, lo que hace que en el correo de gmail muestre la página perfectamente al clicar en el enlace, pero en Icedove, no, da error en la página.

Ahora lo que debiera salir es:

Probando envio de mensajes desde Ganancias Globales, siendo Ganancias Globales un enlace a la página.

Balu, si pudieras darme una pista de que puede ser te lo agradecería.

A continuación te dejo el código que utilizo:
include_once('../includes/conexion.php');
$link=conectarse();
$tabla=$_POST['para'];

echo "","DE : ", $_POST['de'];
echo "";
echo "PARA : ", $_POST['para'];
echo "";
echo "ASUNTO : ", $_POST['asunto'];
echo "","";

$sql = " SELECT * FROM $tabla";
$result = mysql_query($sql);

$registros=0;

while($row = mysql_fetch_array($result))
{
$cabecera_mail = "MIME-Version: 1.0\r\n";
$cabecera_mail = "Content-type: text/html; charset=utf-8\r\n";
//dirección del remitente
$cabecera_mail = "From: Ganancias Globales <$_POST[de]>\r\n";
mail($row[email], $_POST[asunto], $_POST[mensaje], $cabecera_mail);
echo "";

Un Cordial Saludo
Claudio González

Imagen de Anonymous
Anonymous

Hola, soy nueva en esto y me gustaría saber como instalar FCKeditor con asp. voy a utilizar visual studio con visual basic.net

Muchas gracias!!!!

Imagen de Anonymous
Anonymous

hola!
tengo un problemilla con FCKeditor y es que estoy intentando instalarlo para visual studio trabajando con visual basic.net y asp; pero no lo logro.
Gracias a los que puedan ayudarme

Imagen de Victor
Victor

"Sin embargo, este editor no es un CMS (Como por ejemplo Mambo, phpNuke, WordPress, etc.) o uno creado por ti mismo, como es el caso de BaluArt"

Hay una pequeña diferencia entre Crear y Personalizar...

Me habia gustado el blog hasta que leí esto, que falta de respeto con el software libre.

Y por favor, no es a BaluArt al que le inyectaron US$7 millones por tener potencial como CMS, en definitiva... es que nisiquiera el theme , lo repito...qué falta de respto con Drupal y con SeoPosition

Imagen de Paco And Company
Paco And Company

estoy un poco perdido, no se si esta aplicación es la que busco, yo lo que busco es una aplicacion que me permita colocar en una pagina web noticias (texto e imagenes) y que solo pueda hacer tal cosa el personal que este debidamente autorizado como el administrador y algun colaborador, y que aparezca la noticia primero en una pagina con el titulo principal de la noticia y una breve descripcion de esta y en otra pagina al pinchar en la noticia ya salga la noticia por completo, ademas de que los usuarios puedan comentar la noticia previo aprobacion del administrador. trabajo bajo PHP y html, para muestra esta es mi web con un editor de noticias anterior "http://adeba.es/index.php", gracias por adelantado y un saludo

Imagen de alfonsolist
alfonsolist

Hola, Yo tengo el siguiente problema cuando utilizo fckeditor, y es que cuando quiero insertar un enlace en mi web si hace referencia a mi sito web no tengo problema, pero si es alguna web externa me pone el dominio de mi sito web delante, lo que provoca que el link no sea correcto.

Dejo un ejemplo por si no me explicado bien.

Un enlace interno: http://alfonsolist.com/index.html

Un enlace externo. http;//gmail.com, en este caso el editor me poner http://alfonsolist.com/gmail.com

Sabe que puede estar ocurriendo?

Gracias

Imagen de Dionicio
Dionicio

Hola, alguien me podría decir como implementar fckeditor en phpnews?

Imagen de Dionicio
Dionicio

Hola, alguien me puede ayudar a implementarlo en phpnews?

Imagen de LP

hey hermano todo esta excelente, mira soy nuevo en php y la verdad es que corre en mi servidor sale la vista previa.. supuestamente configure el savedata.php con el del ejemplo que viene en la misma carpeta y bueno lo muestra.. pero estoy apunto de enloquecer ya que no entiendo como se guardan estos archivos que uno esta creando porque al parecer solo los previsualiza y luego que vuelvo a refrescar la pagina ya no estan sale en blanco.. te rogaria enormemente que me respondas si fuese posible a mi mail

Imagen de Roaldys
Roaldys

Hola a todos, tengo tremendo problema con Fckeditor.
Lo tengo instalado y funcionando bien... pero cuando copio algo de un Words(utilizando el boton pegar desde Words)y mando ese contenido a la pagina principal, se me desaparecen los bloques izquierda y derecha de la Principal(el contenido sale bien), en las demas paguina si funciona . Estoy en un lio tremendo no se que hacer, por-fa alguien sabe algo...
mi correo es roaldys@gmail.com

Utilizo drupal vs 5.12
fckeditor-5.x-2.1.tar.gz
FCKeditor_2.6.3.tar.gz

Imagen de afperea

esta bueno el tuto aunque no me ha funcionado debe de ser por que estoy usando al ultima version debe de tener alguna modificacion :)

Imagen de algicor
algicor

Hola buenas, tengo un problemilla con el fckeditor:
El editor, se muestra y funciona correctamente, escrito un texto le doy formato y lo recibo en otra pagina, donde lo almaceno en una base de datos.
El problema viene cuando debo mostrar el texto dentro del mismo editor, en una pagina de modificar.

Si el texto almacenado contiene algun salto de linea, no llega nisiquiera a mostrar el editor y tampoco el texto que ya he almacenado...
Alguna solucion???
El texto que utilizo en la pagina de modificar el texto, es el sgte:

' ;
oFCKeditor.Create() ;
//-->

Imagen de ricardo avalos
ricardo avalos

Una consulta:

Cargo el editor desde una base de datos con codigo html, utilizando el php segun explicaste.

El problema que en vez de que el editor interprete el html y muestre el contenido como debiera (con diseño, colores, etc) según viene en el html, solo muestra el codigo html sin interpretarlo.. que puede ser??

Páginas

Tutoriales

Cómo descargar videos de VK.com
En este artículo voy a explicar como descargar videos y películas...
Descargar Facebook Móvil Gratis
Por si aún no lo han hecho, es posible descargar Facebook Móvil...
Cómo generar tráfico web con las redes sociales - Paso a Paso
Muchas empresas están publicando contenidos como la forma de crear...

Artículo Recomendado

3 Tips cruciales para recuperar archivos eliminados
¿Te imaginas perder el trabajo de toda una semana en tan solo unos segundos? Todos hemos pasado por este problema. Quizás eliminamos por error un archivo importante o lo borramos sin pensar que era valioso para otro... más