FCKeditor (I Parte): Su Instalación

Mié, 08/03/2005 - 00:00 : baluart

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 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:

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:

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.

verifica que realmente estes

verifica que realmente estes poniendo "http://gmail.com" en la url... al lado de el text box donde pones el url del sitio (www.google.com) hay una lista (combo), donde puedes elegir el tipo de protocolo que tendra el link... (para este caso http://), de otro modo lo tomara como un link interno del tipo http//:tusitio.com/www.google.com

Espero haberte ayudado...

responder

Enviado por Anonymous (no verificado) el Jue, 07/02/2009 - 11:11.

Hola Balu. Excelente

Hola Balu. Excelente por tu espacio que me parece muy interesante. Sin embargo tengo un problema con el Fckeditor , no puedo volver a editar un texto pegado desde word con caracteristicas especiales para modificarlo. En realidad tengo un formulario que lista todos los registro o contenidos dando la opción de modificarlos a través de un enlace llamado "modificar" le paso todas las variables correspondientes, el fckeditor lo edita perfectamente al contenido cuando es un pegado desde word de texto plano, pero no asi cuando es un pegado desde word de texto limpio (texto con caracteres especiales como letras con colores, tamaños diferentes o dibujos, etc.). Es entonces que el fckeditor no aparece, es como si el fckeditor se hubiera bloqueado. ¿Como puedo remediar esta situación? Gracias y un saludoCarmen Rosa

responder

Enviado por CRCB (no verificado) el Mié, 03/22/2006 - 23:35.

Hola Baluinstale la

Hola Baluinstale la herramienta FCK editor tal y como esta en tus blogs , pero al momento de correr el script no me carga la pagina que contiene el FCKeditor.php . ahy necesito tu valiosa ayuda .gracias Balù

responder

Enviado por Fernando (no verificado) el Lun, 02/11/2008 - 20:07.

hola,soy nueva en ph

hola,soy nueva en php, y quisiera saber como crear la base de datos y hacer la consulta para acceder al fckeditor... gracias a los que me puedan colaborar

responder

Enviado por marcela (no verificado) el Dom, 02/17/2008 - 22:44.

HOLA AMIGOS.Necesito

HOLA AMIGOS.Necesito saber cuantos caracteres almacena el FCKeditor, tengo una pagin de noticias y son de muchos caracteres, las noticias me ingresan hasta cierto punto y las otras lineas no me las deja ver, me gustaria saber cual es al archivo donde se encuentra el maximo de caracteres que permite para cambiarlo?.Gracias por la ayudita

responder

Enviado por Diego (no verificado) el Lun, 02/18/2008 - 11:27.

Hola Baluarte, me pa

Hola Baluarte, me parecio exelente tu aporte, sos grande, pero tengo una duda!Por lo que veo se pueden subir archivos de tipo .flv, mi pregunta es: Se pueden reproducir al darle vista previa? Creo que no!, pero me gustaria saber si abria que configurarle algo asi como lo que hiciste con el skin del office 2003.Si no, me puedes decir si has trabajado algo asi como yuotube.comMuchas gracias viejo, espero tu respuesta pronto!

responder

Enviado por Alex (no verificado) el Vie, 02/22/2008 - 15:55.

HOLA AMIGOS. Necesit

HOLA AMIGOS. Necesito saber cuantos caracteres almacena el FCKeditor, tengo una pagin de noticias y son de muchos caracteres, las noticias me ingresan hasta cierto punto y las otras lineas no me las deja ver, me gustaria saber cual es al archivo donde se encuentra el maximo de caracteres que permite para cambiarlo?. Gracias por la ayudita

responder

Enviado por fer (no verificado) el Mar, 02/26/2008 - 19:18.

Hola Carmen, a

Hola Carmen, a mi me funciona perfectamente, pero también no utilizo demasiados caracteres. ¿Estas pegando con el botón especial para Word? Por cierto, cuando hablas de dibujos te refieres a los webdings, porque ten en cuenta que no todos los caracteres se reconocen en la web. Acabo de poner un post al respecto. Que es la codificación de caracteres?Por otra parte, te recomiendo que no copies directamente de word, si es vas a hacer una publicación continua es mejor crear hojas de estilo css y mantener la uniformidad del texto, pues facilita la lectura y es más fácil de modificar en el futuro.Saludos.

responder

Enviado por Balú (no verificado) el Vie, 03/24/2006 - 01:05.

¿Como puedo i

¿Como puedo instalar la última versión de fck editor en Mambo?. He subido los archivos al servidor y he creado un directorio junto a los otros editores que vienen con Mambo pero no lo reconoce. No he conseguido instalarlo como un bot. Gracias por la ayuda.

responder

Enviado por Jose Luis (no verificado) el Vie, 03/24/2006 - 04:11.

Hola Jose Luis, para

Hola Jose Luis, para el caso de mambo es mejor hacerlo con el bot, para que puedas administrarlo correctamente. Al inicio del artículo puse el enlace a Zona Mambo, en donde hay varios artículos al respecto. Este es otro enlace a mambohispanoSin embargo, si deseas hacerlo manualmente lo que tienes que hacer es ubicar el fichero que muestra el formulario para escribir las noticias, en este fichero es donde aplicas lo dicho en el artículo.Saludos.

responder

Enviado por Balú (no verificado) el Vie, 03/24/2006 - 13:05.

Balú, gracias por tu

Balú, gracias por tu página de ayuda y por la ayuda que nos prestas a los patosos. He desarrollado una pagina web con php+Mysql y todo va estupendo. La pagina tiene básicamente documentos de texto (artículos). He hecho también unos formularios para que los usuarios de la página puedan introducir/borrar/modificar articulos. Bueno, en resumen. No consigo ejecutar el ejemplo facilito de FCKedit con PHP. He modificado en fckconfig.js los valores de _FileBrowserLanguage = 'php' _QuickUploadLanguage = 'php' e incluso el config.php $Config['Enabled'] = true, todo ello siguiento las instrucciones dehttp://wiki.fckeditor.net/Developer%27s_Guide/Integration/PHP Pero nada. ¿Me ayudas por favor? ¿es cuestión de versiones de PHP (creo que tengo el 5)? Gracias

responder

Enviado por Rafael Gallego (no verificado) el Jue, 03/30/2006 - 06:07.

Que tal Rafael, pien

Que tal Rafael, pienso que lo mejor que puedes hacer es deshacer todas las modificaciones y regresar todo como era antes. Luego sigue los pasos de este artículo, que además concuerdan con los del wiki oficial. No creo que se trate de la versión de PHP, aunque yo trabajo con 4.x.Importante: Verifica que el path sea el correcto, sino no va a funcionar. Aunque no lo creas, es de los errores más comunes en este caso... he recibido varios contactos que lo reafirman.Saludos.

responder

Enviado por Balú (no verificado) el Jue, 03/30/2006 - 07:32.

Balú, gracias por tu

Balú, gracias por tu rapida respuesta. Ya he descubierto el problema: ¡ no funciona con el FIREFOX 1.5.0.1 !!! ¿eS POSIBLE? Con el IE 6 va estupendamente, pero con el FIREFOX sale lo siguiente BasePath = '/FCKeditor/'; $oFCKeditor->Value = 'Default test in editor'; $oFCKeditor->Create() ; ?>y debajo el botón SUBMIT.Como te lo digo. ¿Has tenido noticias de algo parecido? Según la información que había visto, funciona en todos los navegadores (incluido Opera, Lotus, etc, etc)Voy a explorar a ver que dice la página de FCKEdit a ver si es algo del FIREFOX que debo configurar.Si descubro algo te lo comento.P.D. Magnifico tu blog, y bonito diseño. Visita mi página. Es más ideológica y casera, pero el diseño es profesional.

responder

Enviado por Rafael Gallego (no verificado) el Vie, 03/31/2006 - 06:02.

Balú, te informo a t

Balú, te informo a tí y tus lectores (información encontrada en http://www.rajprasad.net/plugins/editormonkey/comment-page-11/Traduzco: "En Firefox, si algo no te funciona, intenta desinstalar o actualizar una o todas las extensiones"Tenía dos extensiones sin actualizar, lo he hecho y VOILA!!!! Gracias de nuevo por tu interés.

responder

Enviado por Rafael Gallego (no verificado) el Vie, 03/31/2006 - 06:18.

Las gracias a ti por

Las gracias a ti por la información. Saludos.

responder

Enviado por Balú (no verificado) el Sáb, 04/01/2006 - 04:13.

Que pena, soy pricip

Que pena, soy pricipiante en el manejo de Fck, ya tengo una base de datos en mysql, ya uso el fckeditor...pero ahora no se como montar lo que tengo en la base de datos en mi pahina php, yo lo que hago es que hago la consulta en la base de datos y con echo trato de imprimirel contendio y me sale todo el codigo html, como hago para que salga la pagina, lo que edite bien publicado en la pagina, ???

responder

Enviado por pedro leon (no verificado) el Mié, 04/05/2006 - 01:35.

Hola Pedro. Fijate e

Hola Pedro. Fijate en el código de tu BD. Pienso que no haz guardado las etiquetas html correctamente. Sino los caracteres especiales. Saludos.

responder

Enviado por Balú (no verificado) el Jue, 04/06/2006 - 11:16.

Hola Balú:Felicitaci

Hola Balú:Felicitaciones por tu web!!! Tengo un problema... el FCKeditor tiene la opción de subir imágenes al servidor (Localhost) para después cargarlas en un documento, pero resulta que no me funciona esa opción... pues en el I.E. 6.02 no se abre el cuadro de diálogo de upload y en el FireFox 1.5 a pesar de que se visualiza el cuadro de diálogo de upload, no se envía en realidad el archivo, a parte de que cuando se requiere cargar una imágen, no aparece en el listado ni se crean las carpetas que se definen dentro del cuadro de diálogo.Mi preguntas son:

Existe algún enrutamiento específico que se deba configurar?
Es acaso alguna variable dentro del FCKeditor?
Cómo puedo solucionar este problema?

Saludos!!

responder

Enviado por Mellileo (no verificado) el Mié, 05/03/2006 - 23:49.

Hola Mellileo, si se

Hola Mellileo, si seguiste la segunda parte de este tutorial, no deberías tener ningún problema.Este es el enlace: FCKeditor: Configurando el Administrador de ArchivosPor cierto, debes de crear la carpeta UserFiles, pues ahí es donde subes las imágenes por defecto. A menos, que cambies el path.Por cierto ¿Esto te pasa sólo cuando utilizas la pestaña cargar ó también cuando subes imágenes desde el explorador del servidor?Además, como esta en el enlace de arriba, la variable del path es:$Config['UserFilesPath'] = '/UserFiles/' ; Por cierto, no olvides dar los permisos CHMOD a la carpeta.Saludos.

responder

Enviado por Balú (no verificado) el Vie, 05/05/2006 - 11:33.

Hola Balu.He integra

Hola Balu.He integrado el FCK editor en Php news, y no paro de tener el mismo problema. No me deja subir imagenes.He hecho lo que comentas en el tutorial pero nada, cuando intento subir una imagen en el servidor me sale el sigiente mensaje: Errror Over disk quoata, unable to determine the size of a folder.Al intentar crear un directorio me sale: que no tengo permisos para crear un directorio.Me pregunta es, ¿Donde hay que crear la carpeta userfiles? ¿Hay ke cambiar algun archivo más? a le he dado permisos a la carpeta y esto ya me esta volviendo loco.Gracias de antemano amigo.

responder

Enviado por Juanpa (no verificado) el Sáb, 05/06/2006 - 20:52.

Otro problema que me

Otro problema que me he dado cuanta ahora. He incorporado el FCKeditor al PHPnews, pues bien cuanddo envio una noticia, solo se ve el texto como codigo html, es decir no puedo poner ni tildes ni ñ, porque me salen etiquetas html, la verdad no se lo que pasa porque el codigo html aparece desactivado.

responder

Enviado por Juanpa (no verificado) el Sáb, 05/06/2006 - 23:01.

Hola Balu.He integra

responder

Enviado por Juanpa (no verificado) el Sáb, 05/06/2006 - 20:52.

Acabo de solucionar

Acabo de solucionar lo del html, habia que desactivarlo del archivo fckconifg.js . El problema continúa con lo de subir imagenes, la verdad es que supongo que será un problema de permisos.

responder

Enviado por Juanpa (no verificado) el Sáb, 05/06/2006 - 23:52.

Saludos, he visto que el

Saludos, he visto que el problema que tenias con las Ñ y creo al igual con las tildes supiste resolverlas, dices que desde el fckeditor.js se debe desactivar, me gustaria saber en que parte es que se tiene que realizar este cambio (desactivar), gracias y espero tu ayuda. Cordiales saludos...

tucoweb

responder

Enviado por tucoweb (no verificado) el Mar, 02/17/2009 - 05:56.

Hola Balú:Dando resp

Hola Balú:Dando respuesta respuesta a la pregunta del post No.22 de este artículo, te comento que con el explorador del servidor no tengo ningún problema, sólo dá dificultades cuando utilizo la pestaña "Cargar" del cuadro de diálogo "Propiedades de la imágen".Mil gracias por tu respuesta anterior y por la ayuda que me puedas dar al respecto con este problemita.Saludos.

responder

Enviado por Mellileo (no verificado) el Mar, 05/09/2006 - 06:17.

Hola Juanpa y Mellil

Hola Juanpa y Mellileo, en ambos casos sólo se me ocurren problemas de permisos. Por cierto, la carpeta UserFiles va en la raiz del sitio y en mi caso tienen permisos 777.La carpeta UserFiles tiene 3 subcarpetas: File, Flash e Image, cada cual para los distintos ficheros. Las 3 también en 777.Mellileo... Cuando se suben ficheros por el explorador, se almacenan en las respectivas subcarpetas; pero cuando se lo hace desde la pestaña cargar, se almacenan el la carpeta UserFiles. Por lo que hay la posibilidad de que sea la carpeta UserFiles la que necesite los permisos.Saludos.

responder

Enviado por Balú (no verificado) el Jue, 05/11/2006 - 09:47.

por favor me pdroan

por favor me pdroan expliacar como configuro para que la ventana me aparescan las ñ y las tildes estoy utilizando asp.

responder

Enviado por marko (no verificado) el Vie, 05/12/2006 - 15:39.

Soy yo de nuevo me o

Soy yo de nuevo me olvidaba de felicitarte por el blog esta muy bueno .. y viva el Perú!

responder

Enviado por marko (no verificado) el Vie, 05/12/2006 - 16:00.

Hola Balu!Necesito c

Hola Balu!Necesito cargar unas variables en FCKeditor.En el anterior editor de texto me funcionaba pero no se que hago mal.Este es el codigo<?php$oFCKeditor = new FCKeditor('descripcion') ;$oFCKeditor->BasePath = 'FCKeditor/';$oFCKeditor->Value = '$descripcion';$oFCKeditor->Create() ;?>Pero no me carga la variable, me sale en el campo de texto del FCKeditor $descripcion y no el contenido de la base de datos.GraciasSalutGabi