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 Balu: He prestado atención al artículo sobre el FCK Editor y me ha parecido interesante. Necesito explicación sobre la manera de utilizar este editor para la actualización del contenido de las diferentes páginas de un sitio web. ¿Cómo debo configurarlo? ¿cómo puedo acceder a través de él a las páginas del sitio? ¿Cuáles detalles debo incorporar a las páginas del sitio para que sean reconocidas por el editor?... En fin. Me gustaría conocer tus sugerencias al respecto. Gracias de antemano.
FCKeditor es una herramienta que te permite escribir código html de una manera gráfica. Sin embargo, este editor no es un CMS (Como por ejemplo Mambo, phpNuke, WordPress, etc.) o uno creado por ti mismo,
como es el caso de BaluArt, por este motivo tienes que hacer uso de algún CMS y recién a éste añadirle el FCKeditor.Los pasos para configurarlo, ya están dichos en este artículo. Además, he publicado dos posts que explican cómo personalizar el editor, cómo configurar su explorador de imágenes y cómo hacer uso de CSS, quedando pendiente la configuración de la vista previa. En este enlace tienes los links a estos artículos.
Por otra parte, como mencionaba antes, para acceder a las diferentes páginas debes hacer uso de algún CMS, los cuales son muy facil de instalar y usar.
Espero que lo dicho te sea de utilidad, saludos.
hola Balu. Lo primero felicitarte por tu espacio que me parece muy interesante. He seguido las instrucciones que has dado con respecto al FCK y sin problemas. Yo no trabajo CMS, trabajo directamente las webs en php/Mysql y a la hora de subir los contenidos por medio del editor FCK y mostrarlos en la web el resultado es perfecto. Cuando edito los artículos para modificar algo de ellos lo hago mostrando un listado con los mismos y dando opción a modificarlos o borrarlos. La cuestión es que paso las variables por get y las coge todas (incluida la del artículo) pero en la lista muestra el texto del artículo mientras que las imágenes las muestra en la caja donde posteriormente se edita el artículo para su modificación.El artículo está en un campo text. He probado con un campo blob y el resultado es el mismo. ¿Puede ser que debiera usar otro gestor de bases de datos como postgree o algo así?¿Será porque, como comentas, es necesario integrar el FCK en un CMS?Bueno, espero haberme explicado. Muchas gracias y un saludo.
Que tal Chefo. Te respondo las preguntas, luego trato de explicar lo que te he entendido y luego te digo mi opinión. ¿Puede ser que debiera usar otro gestor de bases de datos como PostgreSQL o algo así? Para empezar PHP y MySQL me parece que aún es la mejor combinación, por lo cual no te recomiendo todavía usar PostgreSQL sobretodo porque no hay tanta información al respecto. ¿Será porque, como comentas, es necesario integrar el FCK en un CMS? Por lo que veo tu creación es un CMS, no uno prefabricado, pero con el cual puedes perfectamente manejar los contenidos de tu web. Ahora, me explico a ver si te he entendido bien. Primero, tú haz creado, entre otros, dos campos distintos en tu tabla de la BD: uno para el tenor del artículo y otro para las imágenes. Segundo, tu sistema funciona correctamente, puedes recuperar los valores de las variables que envías, Tercero, tu problema consiste en que deseas unir el texto y la imagen en una sola área de texto del formulario para editarlas juntas, puesto que por ahora las imágenes las muestra en una caja distinta. En mi opinión, no es necesario que las imágenes estén en un campo blob de la tabla, puede ser text. Por ello, te recomiendo que las rutas a las imágenes las insertes en el mismo campo text donde almacenas el tenor del artículo. Luego cuando recuperes el texto en tu formulario de edición, la imagen aparecerá junto con el texto cuando uses FCKeditor Es decir, si quieres editar las imágenes y el texto en una área de texto del formulario con FCKeditor, entonces el área debe mostrar una sola variable: la que tenga como valor el tenor del artículo. Saludos.
Hola balu. Lo primero muchas gracias por contestarme. De momento ya me has aclarado un par de dudas importantes.No existen dos campos diferentes para imágenes y texto. El textarea manda sólo una variable y tanto imágenes como texto van a un sólo campo llamado artículo y que es de tipo text. cuando consulto el contenido de dicho campo en el phpmyadmin está todo correcto (las imágenes entre los correspondientes tags)Además hay otros campos como título, autor, etc.como te digo a la hora de mostrar el resultado en la web es perfecto. El problema es que he hecho un formulario que lista todos los registros dando la opción de borrarlos o modificarlos y a través de un enlace llamado "modificar" le paso las variables correspondientes a los campos que se pueden modificar a un formulario que recupera esas variables para su modificación.Pero cuando le paso la variable correspondiente al artículo (en el que hay tanto imágenes como texto) muestra el texto en el listado junto al enlace como un vínculo al formulario de modificación. Y en el fckeditor en el tendría que recuperar esa variable para su edición aparece el icono de imagen junto a la expresión </body (así, sin cerrar) y el texto no aparece, lo cual no resulta muy práctico, claro.La cuestión es que me has aclarado que no es un problema del gestor de base de datos y que el fckeditor es válido en este sistema y te lo agradezco un montón.Voy a probar pasando las variables por medio de un input hidden en lugar de por get a ver que pasa y te comentaré si me ha funcionado.Bueno, pues reitero el agradecimiento y recibe saludos deChefo.
Hola buenas...Tengo Drupal con FCKEditor instalado, pero aún no funcionando... saben en que archivo colocar el siguiente código?:<?php include("FCKeditor/fckeditor.php") ; ?>
Hola Zell, el include se pone en el archivo que contiene el script que muestra el campo de texto del formulario. Pero si usas drupal, te recomiendo que descargues el módulo "FCKeditor para Drupal" y lo instales.. es más práctico. Este es el enlace:FCKeditor for DrupalSaludos.
hola Como estas te queria pedir una gran ayuda :es sobre el envio del formulario con fckedit , yo primero antes de enviarlo queria chequearlo que el text area ( como se llame FCKedit1 ) no sea vacio , si bien se muestra un valor por defecto pero si el usuario me borra el valor y no ingresa nada y apreta el boton enviar formulario quiero que diga que el texto no puede ser vacio.Espero que me puedas dar una manito.Gracias y esta muy buena la pagina.
Bienvenido Principiante. Para lo que pides te recomiendo dos cosas:
Saludos.
Hola Balu....Mira tengo dos problemas...
Con respecto a este editor.....
Por ej. inserte este editor con el metodo javscript
es para un form donde el usuario llena en el textarea la info que aparecera en la seccion...pero luego al procesar con otro archio la info que se mostrara en la seccion, todo el formato que aplico en el textarea, por ej. letra en negrita y viñetas, no las visualizo luego al mostrarse esta infor..
Tenes idea por qeu sera...
SALUDOS
Insertar y Editar PHP:
-----CODIGO PARA INSERTAR---
<?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 PARA EDITAR ACTUALIZAR DESDE MYSQL----
<?php
$variable = $row_tabla['variable'];
$oFCKeditor = new FCKeditor('variable') ;
$oFCKeditor->BasePath = 'fckeditor/';//direccion donde instalaste el Fckeditor.
$oFCKeditor->Value = "$variable" ;
$oFCKeditor->Width = '700' ;
$oFCKeditor->Height = '500' ;
$oFCKeditor->Create() ;
?>
le di muchas vueltas, pero así está funcionando.
Saludos
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!
Balu,
Ante todo felicitaciones por tu gran tutorial, gracias a él pude terminar de instalar el fckeditor que se me estaba resistiendo.
Ahora tengo un problema que no se como solucionar. Cuando lo cargo para editar un articulo guardado en mi base de datos (que viene como html) en vez de interpretar elcodigo html me muestra el html tal cual:
Ej: "BasePath = $sBasePath ;
$oFCKeditor->Width = '465' ;
$oFCKeditor->Height = '300' ;
$oFCKeditor->Value = "$texto_noticia";
$oFCKeditor->Create() ;
Que estoy haciendo mal??
Hola Balu ¿Que tal?
Instale FCKeditor en PHP y lo utilizo en mi pagina para enviar mensaje a mis afiliados, y me he dado cuenta en las pruebas que he efectuado, que al llegar los mensajes a las casillas de correo, sale el código html, y no sé como solucionarlo,
Ejemplo:
Probando envio de mensajes desde Ganancias Globales
Como se puede ver en el código muestra un \ entre href=\"http, lo que hace que en el correo de gmail muestre la página perfectamente al clicar en el enlace, pero en Icedove, no, da error en la página.
Ahora lo que debiera salir es:
Probando envio de mensajes desde Ganancias Globales, siendo Ganancias Globales un enlace a la página.
Balu, si pudieras darme una pista de que puede ser te lo agradecería.
A continuación te dejo el código que utilizo:
include_once('../includes/conexion.php');
$link=conectarse();
$tabla=$_POST['para'];
echo "","DE : ", $_POST['de'];
echo "";
echo "PARA : ", $_POST['para'];
echo "";
echo "ASUNTO : ", $_POST['asunto'];
echo "","";
$sql = " SELECT * FROM $tabla";
$result = mysql_query($sql);
$registros=0;
while($row = mysql_fetch_array($result))
{
$cabecera_mail = "MIME-Version: 1.0\r\n";
$cabecera_mail = "Content-type: text/html; charset=utf-8\r\n";
//dirección del remitente
$cabecera_mail = "From: Ganancias Globales <$_POST[de]>\r\n";
mail($row[email], $_POST[asunto], $_POST[mensaje], $cabecera_mail);
echo "";
Un Cordial Saludo
Claudio González
Hola, soy nueva en esto y me gustaría saber como instalar FCKeditor con asp. voy a utilizar visual studio con visual basic.net
Muchas gracias!!!!
hola!
tengo un problemilla con FCKeditor y es que estoy intentando instalarlo para visual studio trabajando con visual basic.net y asp; pero no lo logro.
Gracias a los que puedan ayudarme
"Sin embargo, este editor no es un CMS (Como por ejemplo Mambo, phpNuke, WordPress, etc.) o uno creado por ti mismo, como es el caso de BaluArt"
Hay una pequeña diferencia entre Crear y Personalizar...
Me habia gustado el blog hasta que leí esto, que falta de respeto con el software libre.
Y por favor, no es a BaluArt al que le inyectaron US$7 millones por tener potencial como CMS, en definitiva... es que nisiquiera el theme , lo repito...qué falta de respto con Drupal y con SeoPosition
estoy un poco perdido, no se si esta aplicación es la que busco, yo lo que busco es una aplicacion que me permita colocar en una pagina web noticias (texto e imagenes) y que solo pueda hacer tal cosa el personal que este debidamente autorizado como el administrador y algun colaborador, y que aparezca la noticia primero en una pagina con el titulo principal de la noticia y una breve descripcion de esta y en otra pagina al pinchar en la noticia ya salga la noticia por completo, ademas de que los usuarios puedan comentar la noticia previo aprobacion del administrador. trabajo bajo PHP y html, para muestra esta es mi web con un editor de noticias anterior "http://adeba.es/index.php", gracias por adelantado y un saludo
Hola, Yo tengo el siguiente problema cuando utilizo fckeditor, y es que cuando quiero insertar un enlace en mi web si hace referencia a mi sito web no tengo problema, pero si es alguna web externa me pone el dominio de mi sito web delante, lo que provoca que el link no sea correcto.
Dejo un ejemplo por si no me explicado bien.
Un enlace interno: http://alfonsolist.com/index.html
Un enlace externo. http;//gmail.com, en este caso el editor me poner http://alfonsolist.com/gmail.com
Sabe que puede estar ocurriendo?
Gracias
Hola, alguien me podría decir como implementar fckeditor en phpnews?
Hola, alguien me puede ayudar a implementarlo en phpnews?
hey hermano todo esta excelente, mira soy nuevo en php y la verdad es que corre en mi servidor sale la vista previa.. supuestamente configure el savedata.php con el del ejemplo que viene en la misma carpeta y bueno lo muestra.. pero estoy apunto de enloquecer ya que no entiendo como se guardan estos archivos que uno esta creando porque al parecer solo los previsualiza y luego que vuelvo a refrescar la pagina ya no estan sale en blanco.. te rogaria enormemente que me respondas si fuese posible a mi mail
Hola a todos, tengo tremendo problema con Fckeditor.
Lo tengo instalado y funcionando bien... pero cuando copio algo de un Words(utilizando el boton pegar desde Words)y mando ese contenido a la pagina principal, se me desaparecen los bloques izquierda y derecha de la Principal(el contenido sale bien), en las demas paguina si funciona . Estoy en un lio tremendo no se que hacer, por-fa alguien sabe algo...
mi correo es roaldys@gmail.com
Utilizo drupal vs 5.12
fckeditor-5.x-2.1.tar.gz
FCKeditor_2.6.3.tar.gz
esta bueno el tuto aunque no me ha funcionado debe de ser por que estoy usando al ultima version debe de tener alguna modificacion :)
Hola buenas, tengo un problemilla con el fckeditor:
El editor, se muestra y funciona correctamente, escrito un texto le doy formato y lo recibo en otra pagina, donde lo almaceno en una base de datos.
El problema viene cuando debo mostrar el texto dentro del mismo editor, en una pagina de modificar.
Si el texto almacenado contiene algun salto de linea, no llega nisiquiera a mostrar el editor y tampoco el texto que ya he almacenado...
Alguna solucion???
El texto que utilizo en la pagina de modificar el texto, es el sgte:
' ;
oFCKeditor.Create() ;
//-->
Una consulta:
Cargo el editor desde una base de datos con codigo html, utilizando el php segun explicaste.
El problema que en vez de que el editor interprete el html y muestre el contenido como debiera (con diseño, colores, etc) según viene en el html, solo muestra el codigo html sin interpretarlo.. que puede ser??
Páginas