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:
<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:
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.
Si te gustó este artículo también te gustará...
Hola Jorge, ahora no recuerdo si se puede hacer directamente desde el editor html, sin embargo, puedes poner vista "c
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.
Hola una acotacion mas sobre el mensaje. La aplicacion es trabajado con PHP + Postgres y el manejado de plantillas Smarty
Un error en IE dice:'FCK.Editor.Document,body' es nulo o no es un objeto
Hola Andev, ¿c
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.
Otra consulta has tenido experiencia con Integrar: PHP +Smarty + DOJO + FCKeditor 2.3.2
Otra consulta has tenido experiencia con Integrar: PHP +Smarty + DOJO + FCKeditor 2.3.2
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
Hola Bal
Hola Balu: Quiero saber como puedo hacer un proceso de validaci
Hola,Quer
Holaen primer lugar muchas gracias por este magnifico tutorial,Y ahora mi problema, tengo configurado fckeditor en una aplicaci
Por lo que veo el FckEditor sigue sin funcionar con Opera, es una pena.
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
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
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
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
Julio lee el comentario #40 y descarga el FCKeditor ya configurado para PHP. Un saludo.
Hola. excelente herramienta, pero necesito capturar con el valor que esta dentro del texarea por javascript:alert(mytesarea.value) sabes como puedo lograr estoGRacias
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
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
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
Quer
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.
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
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!!!
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
un detalle que se me paso arriba es que estoy trabajando con php
un detalle que se me paso arriba es que estoy trabajando con php
Páginas