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

sere uno masque te problemas plistengo fncionando el editor pero quiero pesonalizar la vista previa para lo cual quero mandar una variable la cual recupero con document.getElementById() pero me da nulo no me reconoce el ojeto plis tendra algo que ver el fck o esque hago algo malvar id = document.getElementById("idpagina").valuela cual es un hidden en el htmlllamo auna pagina vistaprevia.php?id=id dentro el codigo java script 

Imagen de Ram

Hola:Tengo el editor FCK dentro de un formulario tal y como viene en el ejemplo pero en lugar de enviarlo con un bot

Imagen de Carlos
Carlos

Hola quetal !  soy nuevo en esto de php, y me gustar

Imagen de Carlos
Carlos

Hola quetal !  soy nuevo en esto de php, y me gustar

Imagen de carlos
carlos

hola pues quisiera saber si alguien me puede ayudar resulta q tengo una palicacion jsp y struts le epusto el fckeditor asi solo con java script a mis paginas pero no funciona alguien me podria ayudar ?

Imagen de Carmen
Imagen de Betty
Betty

Hola, me gustar

Imagen de JoseZ
JoseZ

Hola Balu quisiera saber como puedo cambiar el color de fondo esta en blanco y quisiera q tengo el mismo de mi web te lo agradeceraimucho, espero pronta respuesta

Imagen de Pablo
Pablo

hola... tengo una pequeña pregunta,  estado buscando en internet algun sistema facil y efectivo para la edicion de webs ya publicadas (o editor web online) y lo e encontrado, exactamente lo que estaba buscandohttp://www.interspire.com/webedit/un editor completamente directo al html solo que hay un problema, este programa tiene muchas limitaciones segun entiendo. la primera es de que es muy caro la segunda es de que las lisencias son muy limitadas a unas cuantas cuentas... me gustaria saber si existe algun editor paresido o cual me recomiendas... muchas gracias

Imagen de Juan Mart

Hola, estoy tratando de integrar FCKEditor en ASP.net y no lo he conseguido, alguien ya lo intento?? lograron hacerlo funcionar??GRACIAS

Imagen de Eliseo
Eliseo

Tengo una pregunta ya coloque todos los archivos en mi servidor e hice los cambios que se  muestran en este tutorial, pero como es que se realiza la edicion de los archivos, supongamos yo tengo mi sitio hecho y quiero que este lo puedan editar con el fck editor, como lo hago, como creo la base de datos si es que se necesita..     

Imagen de julio
julio

hola como stas yo ya tengo instalado el fck editor en php  pero como haria para validarlo lo q pasa q tengo un campo descripcion q es obligatorio para la web se escriba minimo una linea y ese campo lo estoy editando con el fckeditor pero cuando lo valido con un javascript siempre lo toma nulo o en blanco porq en si lo q hace el fckeditor crear un iframe y no un textarea , como podria hacer para validarlo ?

Imagen de Mariana
Mariana

Hola...ya tegno instalado el editos y funciona super bien...gracias por tu aporte....pero sabes tengo un gran problema...como rescato los datos que ingreso en el editor....lo que pasa es que cuando los muestro no se ve la imagen se ve esto como codigo:<p><input type="image" height="112" width="89" src="/userfiles/image/mariana.jpg" />Default text in editor</p><br />ojala me puedas ayudar...no se que hacer ...muchas gracias

Páginas

Dejar comentario

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