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 amigo muy bueno lo que escribiste pero tenes idea de como agregar codigo de un lenguaje tipo como cuando vos escribis en los foros que te la posibilidad de ingresar codigo.
Para insert o update con base de datos.
<?php
$oFCKeditor = new FCKeditor('variable') ;
$oFCKeditor->BasePath = 'fckeditor/';//direccion donde instalaste el Fckeditor.
$oFCKeditor->Value = "$variable" ;
$oFCKeditor->Width = '700' ;
$oFCKeditor->Height = '500' ;
$oFCKeditor->Create() ;
?>
Codigo 100% verificado y funcionado.
Hola y gracias por la ayuda, me funciona perfecto para insertar, pero al quere editar no puedo mostrar $row['descripcion']
$oFCKeditor = new FCKeditor($row['descripcion']);
$oFCKeditor->BasePath = 'fckeditor/';
$oFCKeditor->Width = '600' ;
$oFCKeditor->Height = '500' ;
$oFCKeditor->Create() ;
completo:
<?php
//recibimos la variable id enviada en el enlace por GET
$id=$_GET[id];
//hacemos las consultas
$result=mysql_query("select id,titulo,telefono,operacion,banos,habitaciones,ciudad,provincia,mtscuadrados,precioventa,preciopesos,preciorenta,tipoinmueble,descripcion,fechaingreso,imagen,imagen1,imagen2 ,referencia from propiedades where id='$id'"
,$enlace);
//Una vez seleccionados los registros los mostramos para su edición
echo '';
include("fckeditor/fckeditor.php") ;
while($row=mysql_fetch_array($result)){
echo '
TITULO
TELEFONO
OPERACION
BAÑOS
HABITACIONES
CIUDAD
PROVINCIA
m2
PRECIO EN DOLARES
PRECIO $
PRECIO ALQUILER
TIPO DE INMUEBLE
DESCRIPCION
FECHA DE INGRESO
$oFCKeditor = new FCKeditor($row["descripcion"]);
$oFCKeditor->BasePath = "fckeditor/";
$oFCKeditor->Width = "600" ;
$oFCKeditor->Height = "500" ;
$oFCKeditor->Create() ;
IMAGEN
IMAGEN 1
IMAGEN 2
REFERNCIA
';
}
mysql_free_result($result);
mysql_close($enlace);
buenas a todos. tengo un problema con el fckeditor. resulta que yo estoy enviando el nombre del fckeditor en el ajax. pero no me reconoce el nombre del fckeditor. alguien me puede decir la solucion. llevo horas tratando de encontrar una manera de que se envie el nombre del textarea al ajax.
Hola de nuevo Balu, tengo una pregunta y un problema. La pregunta es ¿como configuro el corrector ortografico? por lo que vi ay que descargarlo, pero, ¿existe otra forma, que me recomiendas?, y el problema es al pegar contenido copiado desde word, con el texto funciona exelente, pero al insertar tablas (de cualquier tamaño) no lo hace en la BD a menos que marque la opcion de la ventana de pegado "Remover definiciones de estilo", asi si inserta en la BD. No se si es problema de el tipo de campo(que ya he probado con todos) de la BD o del Fk(que es exelente). Gracias por tu respuesta!
Disculpa Victor, pero ese comentario es del 2005, cuando usabamos un CMS propio, y la migración de Baluart a Drupal lo hicimos este año, por nuestro 3er aniversario, y lo anunciamos en un post con todos los créditos al CMS y Theme.
http://www.baluart.net/articulo/increible-como-pasa-el-tiempo
Gracias por el comentario, voy a editar el comentario. :)
verifica que realmente estes poniendo "http://gmail.com" en la url... al lado de el text box donde pones el url del sitio (www.google.com) hay una lista (combo), donde puedes elegir el tipo de protocolo que tendra el link... (para este caso http://), de otro modo lo tomara como un link interno del tipo http//:tusitio.com/www.google.com
Espero haberte ayudado...
Hola Balu. Excelente por tu espacio que me parece muy interesante. Sin embargo tengo un problema con el Fckeditor , no puedo volver a editar un texto pegado desde word con caracteristicas especiales para modificarlo. En realidad tengo un formulario que lista todos los registro o contenidos dando la opción de modificarlos a través de un enlace llamado "modificar" le paso todas las variables correspondientes, el fckeditor lo edita perfectamente al contenido cuando es un pegado desde word de texto plano, pero no asi cuando es un pegado desde word de texto limpio (texto con caracteres especiales como letras con colores, tamaños diferentes o dibujos, etc.). Es entonces que el fckeditor no aparece, es como si el fckeditor se hubiera bloqueado. ¿Como puedo remediar esta situación? Gracias y un saludoCarmen Rosa
Hola Baluinstale la herramienta FCK editor tal y como esta en tus blogs , pero al momento de correr el script no me carga la pagina que contiene el FCKeditor.php . ahy necesito tu valiosa ayuda .gracias Balù
hola,soy nueva en php, y quisiera saber como crear la base de datos y hacer la consulta para acceder al fckeditor... gracias a los que me puedan colaborar
HOLA AMIGOS.Necesito saber cuantos caracteres almacena el FCKeditor, tengo una pagin de noticias y son de muchos caracteres, las noticias me ingresan hasta cierto punto y las otras lineas no me las deja ver, me gustaria saber cual es al archivo donde se encuentra el maximo de caracteres que permite para cambiarlo?.Gracias por la ayudita
Hola Baluarte, me parecio exelente tu aporte, sos grande, pero tengo una duda!Por lo que veo se pueden subir archivos de tipo .flv, mi pregunta es: Se pueden reproducir al darle vista previa? Creo que no!, pero me gustaria saber si abria que configurarle algo asi como lo que hiciste con el skin del office 2003.Si no, me puedes decir si has trabajado algo asi como yuotube.comMuchas gracias viejo, espero tu respuesta pronto!
HOLA AMIGOS. Necesito saber cuantos caracteres almacena el FCKeditor, tengo una pagin de noticias y son de muchos caracteres, las noticias me ingresan hasta cierto punto y las otras lineas no me las deja ver, me gustaria saber cual es al archivo donde se encuentra el maximo de caracteres que permite para cambiarlo?. Gracias por la ayudita
Hola Carmen, a mi me funciona perfectamente, pero también no utilizo demasiados caracteres. ¿Estas pegando con el botón especial para Word? Por cierto, cuando hablas de dibujos te refieres a los webdings, porque ten en cuenta que no todos los caracteres se reconocen en la web. Acabo de poner un post al respecto. Que es la codificación de caracteres?Por otra parte, te recomiendo que no copies directamente de word, si es vas a hacer una publicación continua es mejor crear hojas de estilo css y mantener la uniformidad del texto, pues facilita la lectura y es más fácil de modificar en el futuro.Saludos.
¿Como puedo instalar la última versión de fck editor en Mambo?. He subido los archivos al servidor y he creado un directorio junto a los otros editores que vienen con Mambo pero no lo reconoce. No he conseguido instalarlo como un bot. Gracias por la ayuda.
Hola Jose Luis, para el caso de mambo es mejor hacerlo con el bot, para que puedas administrarlo correctamente. Al inicio del artículo puse el enlace a Zona Mambo, en donde hay varios artículos al respecto. Este es otro enlace a mambohispanoSin embargo, si deseas hacerlo manualmente lo que tienes que hacer es ubicar el fichero que muestra el formulario para escribir las noticias, en este fichero es donde aplicas lo dicho en el artículo.Saludos.
Balú, gracias por tu página de ayuda y por la ayuda que nos prestas a los patosos. He desarrollado una pagina web con php+Mysql y todo va estupendo. La pagina tiene básicamente documentos de texto (artículos). He hecho también unos formularios para que los usuarios de la página puedan introducir/borrar/modificar articulos. Bueno, en resumen. No consigo ejecutar el ejemplo facilito de FCKedit con PHP. He modificado en fckconfig.js los valores de _FileBrowserLanguage = 'php' _QuickUploadLanguage = 'php' e incluso el config.php $Config['Enabled'] = true, todo ello siguiento las instrucciones dehttp://wiki.fckeditor.net/Developer%27s_Guide/Integration/PHP Pero nada. ¿Me ayudas por favor? ¿es cuestión de versiones de PHP (creo que tengo el 5)? Gracias
Que tal Rafael, pienso que lo mejor que puedes hacer es deshacer todas las modificaciones y regresar todo como era antes. Luego sigue los pasos de este artículo, que además concuerdan con los del wiki oficial. No creo que se trate de la versión de PHP, aunque yo trabajo con 4.x.Importante: Verifica que el path sea el correcto, sino no va a funcionar. Aunque no lo creas, es de los errores más comunes en este caso... he recibido varios contactos que lo reafirman.Saludos.
Balú, gracias por tu rapida respuesta. Ya he descubierto el problema: ¡ no funciona con el FIREFOX 1.5.0.1 !!! ¿eS POSIBLE? Con el IE 6 va estupendamente, pero con el FIREFOX sale lo siguiente BasePath = '/FCKeditor/'; $oFCKeditor->Value = 'Default test in editor'; $oFCKeditor->Create() ; ?>y debajo el botón SUBMIT.Como te lo digo. ¿Has tenido noticias de algo parecido? Según la información que había visto, funciona en todos los navegadores (incluido Opera, Lotus, etc, etc)Voy a explorar a ver que dice la página de FCKEdit a ver si es algo del FIREFOX que debo configurar.Si descubro algo te lo comento.P.D. Magnifico tu blog, y bonito diseño. Visita mi página. Es más ideológica y casera, pero el diseño es profesional.
Balú, te informo a tí y tus lectores (información encontrada en http://www.rajprasad.net/plugins/editormonkey/comment-page-11/Traduzco: "En Firefox, si algo no te funciona, intenta desinstalar o actualizar una o todas las extensiones"Tenía dos extensiones sin actualizar, lo he hecho y VOILA!!!! Gracias de nuevo por tu interés.
Las gracias a ti por la información. Saludos.
Que pena, soy pricipiante en el manejo de Fck, ya tengo una base de datos en mysql, ya uso el fckeditor...pero ahora no se como montar lo que tengo en la base de datos en mi pahina php, yo lo que hago es que hago la consulta en la base de datos y con echo trato de imprimirel contendio y me sale todo el codigo html, como hago para que salga la pagina, lo que edite bien publicado en la pagina, ???
Hola Pedro. Fijate en el código de tu BD. Pienso que no haz guardado las etiquetas html correctamente. Sino los caracteres especiales. Saludos.
Hola Balú:Felicitaciones por tu web!!! Tengo un problema... el FCKeditor tiene la opción de subir imágenes al servidor (Localhost) para después cargarlas en un documento, pero resulta que no me funciona esa opción... pues en el I.E. 6.02 no se abre el cuadro de diálogo de upload y en el FireFox 1.5 a pesar de que se visualiza el cuadro de diálogo de upload, no se envía en realidad el archivo, a parte de que cuando se requiere cargar una imágen, no aparece en el listado ni se crean las carpetas que se definen dentro del cuadro de diálogo.Mi preguntas son:
Saludos!!
Hola Mellileo, si seguiste la segunda parte de este tutorial, no deberías tener ningún problema.Este es el enlace: FCKeditor: Configurando el Administrador de ArchivosPor cierto, debes de crear la carpeta UserFiles, pues ahí es donde subes las imágenes por defecto. A menos, que cambies el path.Por cierto ¿Esto te pasa sólo cuando utilizas la pestaña cargar ó también cuando subes imágenes desde el explorador del servidor?Además, como esta en el enlace de arriba, la variable del path es:$Config['UserFilesPath'] = '/UserFiles/' ; Por cierto, no olvides dar los permisos CHMOD a la carpeta.Saludos.
Hola Balu.He integrado el FCK editor en Php news, y no paro de tener el mismo problema. No me deja subir imagenes.He hecho lo que comentas en el tutorial pero nada, cuando intento subir una imagen en el servidor me sale el sigiente mensaje: Errror Over disk quoata, unable to determine the size of a folder.Al intentar crear un directorio me sale: que no tengo permisos para crear un directorio.Me pregunta es, ¿Donde hay que crear la carpeta userfiles? ¿Hay ke cambiar algun archivo más? a le he dado permisos a la carpeta y esto ya me esta volviendo loco.Gracias de antemano amigo.
Otro problema que me he dado cuanta ahora. He incorporado el FCKeditor al PHPnews, pues bien cuanddo envio una noticia, solo se ve el texto como codigo html, es decir no puedo poner ni tildes ni ñ, porque me salen etiquetas html, la verdad no se lo que pasa porque el codigo html aparece desactivado.
Hola Balu.He integrado el FCK editor en Php news, y no paro de tener el mismo problema. No me deja subir imagenes.He hecho lo que comentas en el tutorial pero nada, cuando intento subir una imagen en el servidor me sale el sigiente mensaje: Errror Over disk quoata, unable to determine the size of a folder.Al intentar crear un directorio me sale: que no tengo permisos para crear un directorio.Me pregunta es, ¿Donde hay que crear la carpeta userfiles? ¿Hay ke cambiar algun archivo más? a le he dado permisos a la carpeta y esto ya me esta volviendo loco.Gracias de antemano amigo.
Acabo de solucionar lo del html, habia que desactivarlo del archivo fckconifg.js . El problema continúa con lo de subir imagenes, la verdad es que supongo que será un problema de permisos.
Saludos, he visto que el problema que tenias con las Ñ y creo al igual con las tildes supiste resolverlas, dices que desde el fckeditor.js se debe desactivar, me gustaria saber en que parte es que se tiene que realizar este cambio (desactivar), gracias y espero tu ayuda. Cordiales saludos...
tucoweb
Páginas