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

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.

Imagen de Balú

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.

Imagen de marko
marko

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

Imagen de marko
marko

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

Imagen de Gabi
Gabi

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

Imagen de Gabi
Gabi

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

Imagen de Gabi
Gabi

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

Imagen de hugo
hugo

Muy interesante. Saludos.

Imagen de Hector
Hector

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

Imagen de Remy
Remy

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.

Imagen de german
german

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 

Imagen de Arian
Arian

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

Imagen de Patrick

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

Imagen de Balú

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.

Imagen de YolandaGC
YolandaGC

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

Imagen de Antonio Rueda
Antonio Rueda

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 

Imagen de Balú

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.

Imagen de Daniel
Daniel

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

Imagen de Zandro
Zandro

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

Imagen de Bal

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

Imagen de g0nz4
g0nz4

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

Imagen de Bal

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

Imagen de g0nz4
g0nz4

¿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

Imagen de Jose Luis S.

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

Imagen de Jose Luis S.

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

Imagen de aLEJANDRO
aLEJANDRO

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

Imagen de Arian
Arian

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.     

Imagen de Arian
Arian

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.     

Imagen de Arian
Arian

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

Imagen de Jorge
Jorge

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

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