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 Bal

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

Imagen de Andev
Andev

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.

Imagen de Andev
Andev

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

Imagen de Andev
Andev

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

Imagen de Bal
Imagen de Andev
Andev

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. 

Imagen de Andev
Andev

Otra consulta has tenido experiencia con Integrar: PHP +Smarty + DOJO + FCKeditor 2.3.2

Imagen de Andev
Andev

Otra consulta has tenido experiencia con Integrar: PHP +Smarty + DOJO + FCKeditor 2.3.2

Imagen de Bal

Hola Andev, si el editor esta funcionando en Firefox, significa que lo haz llamado correctamente y el problema esta en el javascript. Ahora que mencionas que usas dojo toolkit, de repente éste es el problema, retira dojo y  prueba s

Imagen de Andev
Andev

Hola Bal

Imagen de Andres Sierra A
Andres Sierra A

Hola Balu: Quiero saber como puedo hacer un proceso de validaci

Imagen de Fernando
Fernando

Hola,Quer

Imagen de Carlos

Holaen primer lugar muchas gracias por este magnifico tutorial,Y ahora mi problema, tengo configurado fckeditor en una aplicaci

Imagen de Tumbita
Tumbita

Por lo que veo el FckEditor sigue sin funcionar con Opera, es una pena.

Imagen de Julio
Julio

Hola,soy nuevo en esto y estoy intentando generar el editor con javascript. He seguido manual pero cargo la pagina y me divide la pagina en dos bloques y me pone que no puede mostrar la pagina. Puede ser algo de rutas??La pagina que yo estoy haciendo en que ruta la tengo que poner???Muchas gracias

Imagen de Julio
Julio

Hola,soy nuevo en esto y estoy intentando generar el editor con javascript. He seguido manual pero cargo la pagina y me divide la pagina en dos bloques y me pone que no puede mostrar la pagina. Puede ser algo de rutas??La pagina que yo estoy haciendo en que ruta la tengo que poner???Muchas gracias

Imagen de Julio
Julio

Hola,soy nuevo en esto y estoy intentando generar el editor con javascript. He seguido manual pero cargo la pagina y me divide la pagina en dos bloques y me pone que no puede mostrar la pagina. Puede ser algo de rutas??La pagina que yo estoy haciendo en que ruta la tengo que poner???Muchas gracias

Imagen de Julio
Julio

Hola,soy nuevo en esto y estoy intentando generar el editor con javascript. He seguido manual pero cargo la pagina y me divide la pagina en dos bloques y me pone que no puede mostrar la pagina. Puede ser algo de rutas??La pagina que yo estoy haciendo en que ruta la tengo que poner???Muchas gracias

Imagen de Bal

Julio lee el comentario #40 y descarga el FCKeditor ya configurado para PHP. Un saludo.

Imagen de Andrey
Andrey

Hola. excelente herramienta, pero necesito capturar con el valor que esta dentro del texarea por javascript:alert(mytesarea.value)    sabes como puedo lograr estoGRacias

Imagen de Julio
Julio

Hola querria saber como puedo limitar el numero de caracteres del textarea o el numero de filas o columnas. he probado con maxlength,rows,cols y no me funciona

Imagen de Claudia
Claudia

hola !!!!tengo un problema .... como puedo hacer para que al momento de que se abra mi pagina con el editor, este contenga ya adentro una plantilla que tengo echa en html ???me urge , pleaseeeeee- agradeceria muchisimo su ayuda

Imagen de Claudia
Claudia

hola !!!!tengo un problema .... como puedo hacer para que al momento de que se abra mi pagina con el editor, este contenga ya adentro una plantilla que tengo echa en html ???me urge , pleaseeeeee- agradeceria muchisimo su ayuda

Imagen de Jose Hernan
Jose Hernan

Quer

Imagen de Jose Hernan
Jose Hernan

Hola, soy muy nuevo en esto y quisiera saber algunas cosas:1. como hago para que cuando le de editar al contenido de mi pagina, salga el editor FCKeditor con el contenido a editar ya dentro de el, que yo pueda modificarlo y al darle guardar la modificacion quede hecha en la pagina.

Imagen de Claudia
Claudia

Hola, muxas gracias x tu guia me ha servido de muxo ya tnog instalado el FCK en una pagina ke stoy haciendo.. ahora. Lo k yo deseo esa saber un par de cosas Estoy trabajando con asp 1ro: cuando dicen BD se refieren a guardar el codigo HTML en una celda de la base de datos?? para luego cargarlo en la web??2do: lo k trato de hacer es algo a como este forito, edito/creo una descripcicion en html y lo asigno a un producto y luego en la pagina detalle de producto se muestra la descripcion como web osea usando el html k cree, como podria implementarlo ..estaba pensando crear con el fck un archivo *.html pero nose como lo hace el fck, claro si es k lo hace, solo me muestra el resultado en html en la pagina "sampleposteddata" pero kisiera saber si es posible crear un *.html a partir de ese codigo generado con el fck... de antemano gracias...Besos

Imagen de Gustavo
Gustavo

Hola que tal acabo de bajarme el FCKeditor ultima version y he seguido tus pasos para incrustarlo en mi textarea pero NO LO MUESTRA!!!, en cambio si lo veo desde el  http://localhost/midirectorio/fckeditor/_samples/asp/sample01.aspsi me muestra pero no lo puedo incrustar dentro de mi archivo ASP que ahi tengo un textarea!!!. HELP!!!

Imagen de eniac
eniac

Hola Balu... tengo el mismo problema que Gustavo, me baje el FCKeditor y anda perfectamente en mi localhost, pero al publicarlo en un servidor externo no me muestra el editor, solo me dice " No se encontr

Imagen de Eniac
Eniac

un detalle que se me paso arriba es que estoy trabajando con php

Imagen de Eniac
Eniac

un detalle que se me paso arriba es que estoy trabajando con php

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