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á...
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
Hola:Tengo el editor FCK dentro de un formulario tal y como viene en el ejemplo pero en lugar de enviarlo con un bot
Hola quetal ! soy nuevo en esto de php, y me gustar
Hola quetal ! soy nuevo en esto de php, y me gustar
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 ?
Hola, me gustar
Hola, me gustar
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
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
Hola, estoy tratando de integrar FCKEditor en ASP.net y no lo he conseguido, alguien ya lo intento?? lograron hacerlo funcionar??GRACIAS
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..
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 ?
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