FCKeditor (IV Parte): Personalizando la vista previa
En la actualidad, la mayoría de las páginas Web se desarrollan dinámicamente con el uso de esquemas predefinidos para todo el Site (templates, themes, plantillas, o como se les quiera llamar). Es por esto que si queremos ver como quedaría publicado una noticia o artículo, no debemos verla dentro de una ventana blanca sino dentro del esquema ya definido.
Para finalizar nuestra serie dedicada a FCKeditor, probablemente el editor wysiwyg más completo de la actualidad, vamos a ver como configurar su vista previa.
Los ficheros a modificar
FCKeditor esta programado para trabajar tanto en los navegadores Internet Explorer como en los que funcionan bajo el motor Gecko (Netscape, Firefox, etc.). Pero ambos motores recogen el código JavaScript de manera diferente, se han creado dos ficheros distintos que buscan lo mismo:
- Fckeditorcode_ie_2.js
- Fckeditorcode_gecko_2.js
Por lo que si sólo modificáramos el primero y no el segundo, nuestra vista previa nada más estaría personalizada cuando utilicemos el editor con el Internet Explorer, y viceversa.
Modificamos el fichero Fckeditorcode_ie_2.js
Este extenso archivo javaScript, ubicado en editor/js/fckeditorcode_ie_2.js, define una parte de las funciones del editor que sólo serán aplicadas en Internet Explorer. En este caso debemos ubicar lo referente a la Vista Previa.
Debes saber que FCK.Preview=function(){…} es la función que necesitamos modificar. Dentro de esta función se definen distintas variables como el ancho y alto de la ventana popup, si tendrá barra de herramientas, barra de estado, si puede ser redimensionable y más. Su configuración por defecto es:
FCK.Preview=function(){var iWidth=screen.width*0.8;var iHeight=screen.height*0.7;
var iLeft=(screen.width-iWidth) / 2;var oWindow=window.open('', null, 'toolbar=yes,location=no,status=yes,menubar=yes,scrollbars=yes,
resizable=yes, width=' + iWidth + ',height=' + iHeight + ',left=' + iLeft); …
Un par de líneas después ubicamos lo siguiente:
else{sHTML=FCKConfig.DocType + '<html dir="' +
FCKConfig.ContentLangDirection + '">' + '<head><title>' +
FCKLang.Preview + '</title>' + '<link href="' + FCKConfig.EditorAreaCSS +
'" rel="stylesheet" type="text/css" />' + FCK.TempBaseTag + '</head><body>' + FCK.GetXHTML() + '</body></html>';}
Estas líneas son las que tenemos que modificar añadiéndole todo el código HTML necesario (recuerda que este código debe estar entre comillas simples y para concatenar se utiliza el signo +). Modificando un poco tendríamos lo siguiente:
else{sHTML=FCKConfig.DocType +
'<html dir="' + FCKConfig.ContentLangDirection + '">' +
'<head><title>' + FCKLang.Preview +
'</title><link href="tu-hoja-de-estilos.css" rel="stylesheet" type="text/css" />' + FCK.TempBaseTag + '</head><body>Aquí colocas el html de tu pagina ' + FCK.GetXHTML() /*Este es el contenido que estas escribiendo*/ +
' Aquí colocas el resto de html</body></html>' ; }
Como te habrás dado cuenta puedes colocar el enlace a tu hoja de estilos, podrías incluir una película Flash, imágenes, etc. Pero siempre dentro de las comillas simples.
Modificamos el fichero Fckeditorcode_gecko_2.js
El procedimiento para modificar editor/js/fckeditorcode_gecko_2.js es el mismo que para el fichero anterior, estas son las líneas que vienen por defecto:
FCK.Preview=function(){var iWidth=screen.width*0.8;var iHeight=screen.height*0.7;
var iLeft=(screen.width-iWidth) / 2;var oWindow=window.open('', null, 'toolbar=yes,location=no,status=yes,menubar=yes,scrollbars=yes,
resizable=yes, width=' + iWidth + ',height=' + iHeight + ',left=' + iLeft);
var sHTML;if (FCKConfig.FullPage){if (FCK.TempBaseTag.length > 0) sHTML=FCK.GetXHTML().replace( FCKRegexLib.HeadCloser, FCK.TempBaseTag + '</head>');else sHTML=FCK.GetXHTML();}else{sHTML=FCKConfig.DocType + '<html dir="' +
FCKConfig.ContentLangDirection + '">' + '<head><title>' +
FCKLang.Preview + '</title>' + '<link href="' + FCKConfig.EditorAreaCSS + '" rel="stylesheet" type="text/css" />' + FCK.TempBaseTag + '</head><body>' + FCK.GetXHTML() + '</body></html>';};
Como puedes ver, el código no varía en nada.
Felicitaciones, tienes tremendo blog, de verdad...Ahora bien escribo por que ya tengo instalado en varios sitios el FCKeditor v.2.2 la última, hasta esta noche, pero hoy buscando me encontre con tu blog y vi tu artÃculo del corrector ortográfico googi espell y quiero agregarlo junto al FCKeditor, me podrias ayudar, ver si se agrega como plugin al FCK o hay otra forma, quedo atento, si puedes me das un aviso al correo.Gracias desde Venezuela. Luis Vivas
- responder
Enviado por Luis Vivas (no verificado) el Sáb, 04/29/2006 - 14:25.Hola Balú:Te informo que despues de leer los cuatro capÃtulos de Instalación y configuración del FCKeditor, he podido solucionar mi problema en un 80%, pero el 20% restante hace referencia a la pestaña "Cargar" del cuadro de diálogo "Propiedades de la Imagen", pues aunque se busca la imagen a cargar, al pulsar el botón "Enviar al servidor", no realiza ninguna tarea!! Cómo puedo hacer para que esa función "Cargar" del cuadro de diálogo "Propiedades de la Imagen" envÃe en realidad el archivo seleccionado al Servidor?.Mil gracias y saludos!!
- responder
Enviado por Mellileo (no verificado) el Jue, 05/04/2006 - 04:02.no encuentro el post donde explicas como validar el FCKEDITOr PHp, Necesito validar la cantidad de caracteres de uno de ellos
- responder
Enviado por Anonymous (no verificado) el Vie, 04/04/2008 - 09:49.En el area para previsualizar la imagen que subes con el cargador de imagenes, me aparece aparte de la imagen texto, parece latin, esto es asà o se puede quitar.
Por lo demas es fantastico el editor y tu trabajo con el tutorial.
Gracias amigo.
- responder
Enviado por Victor (no verificado) el Jue, 04/10/2008 - 17:37.La vadilación puedes hacerla con php.
- responder
Enviado por baluart el Vie, 04/04/2008 - 15:20.Hola, por que el editor se demora tanto cargando, en la barra de estado del internet explorer aparece que esta descargando este archivo y en este se demora como 10 segundos.Gracias
- responder
Enviado por Carlos Martinez (no verificado) el Mar, 05/23/2006 - 11:02.Tenes alguna idea de como puedo hacer para incorporar un fondo musical con el FCK editor ? sea escribiendolo en el HTML CODE, como agregando algun nuevo plug in ?
- responder
Enviado por Diego (no verificado) el Vie, 07/14/2006 - 13:10.Todos los que no puedan configurar el administrador de imagenes de FCKeditor con PHP, acabo de hacerlo con la última versión 2.3.1. Pueden descargarlo desde este enlace.Descargar FCKeditor 2.3.1 para PHPEspero les sirva.
- responder
Enviado por Balú (no verificado) el Jue, 08/03/2006 - 10:55.Me parece barbaro todo lo que me han aportado los cuatro capitulos que le has dedicado a FCKeditor. GRacias por tu trabajo... y una pregunta.Estoy eneseñando a usar joomla a un grupo de escolares para que cuelguen sus trabajos en la intranet del instituo y para ello usan el FCKEditor en un servidor local, cuando lo suben al server del instituto han de volver a insertar las imagenes ya que las URL de FCK son absolutas, ¿Donde debo configurar FCK para que me inserte las URL de las imagenes de forma relativa?GRacias d nuevo
- responder
Enviado por Hilario (no verificado) el Mar, 09/26/2006 - 11:41.Hola Hilario, te comento que por defecto la cuando subes una imagen y la insertas con el explorador de im
- responder
Enviado por Bal (no verificado) el Mar, 09/26/2006 - 22:30.Hola, quiero saber como puedo sacarle opciones (botones) yo necesito algo mucho mas sencillo solo con opciones basicas poooorfa
- responder
Enviado por caro (no verificado) el Vie, 09/29/2006 - 14:50.Hola, me he descargado he instalado el FCKEditor 2.3.1. Todo va correctamente, pero a la hora de tengo problemas a la hora de personalizar la vista previa. Uso un sistema de plantillas para php llamado Smarty, y no consigo sacar el textarea en el lugar que le corresponde, dado que me aparece siempre en la parte superior. He llevado a cabo los pasos de la Personalizacion de la vista previa, pero no logro conseguir el resultado esperado.Agradeceria ayuda.Gracias
- responder
Enviado por Carmen (no verificado) el Sáb, 11/04/2006 - 05:11.Hola Carmen no entiendo bien cual es el problema. Si se trata de la vista previa, no tiene nada que ver que trabajes con smarty. La vista previa es del contenido que vas a publicar, no del textarea en s
- responder
Enviado por Bal (no verificado) el Dom, 11/05/2006 - 16:06.Muchas gracias, ya lo he solucionado. Al final la opcion del javascript se ajustaba m
- responder
Enviado por Carmen (no verificado) el Jue, 11/09/2006 - 14:07.Hola amigo me parece interesante el manual que has publicado me ayuda para poder implementar el editor y hacerlo funcionar.. pero de ahi que??.. quiero que los datos modificados se actualizen en la web.. Quiero decir he hecho una web en html pero ahora los que mis clientes me piden que ellos puedan editar su web. Y pongo el editor y se muestra el texto y se puede modificar pero como hago para grabar los cambios y el logeo como?.. solo el administrador debe poder hacer los cambios.. espero me puedas ayudar.. un fabor si puedes me contestas a mi correo.
- responder
Enviado por Arango (no verificado) el Mié, 11/15/2006 - 12:10.HOla Arango, Disculpa, pero no puedo contestarte al mail. Adem
- responder
Enviado por Bal (no verificado) el Mié, 11/15/2006 - 17:24.Grandioso el manual del FCK, grandioso; me has ayudado mucho.Un saludo
- responder
Enviado por Jose Luis (no verificado) el Mar, 02/06/2007 - 06:46.Maravilloso !!!!! Viva Peru !!!Pero deberias explicar como se suben las imagenes al servidor desde el file browser y como se selecciona una imagen ya subida para meterla de nuevo.Los alumnos de artes
- responder
Enviado por Alumnos de Artes (no verificado) el Sáb, 02/24/2007 - 05:16.Excelente manual de ayuda bal
- responder
Enviado por Roberto (no verificado) el Mar, 04/03/2007 - 15:07.muy buen manual, esta todo clarisimo... lo instale y me funciono de inmediato... pero al revisarolo con IE no me deja escribir... como puedo hacer para que funcione...? el error es:linea 91caracter 3462Error: Length es nulo o no es un objetoCodigo: 0Direccion: .../FCKeditor/editor/fckeditor.htm?InstanceName=comentario&Tolbar=Defalt
- responder
Enviado por Andr (no verificado) el Mar, 05/08/2007 - 14:55.Excelente Tutorial,te Felicito amigo. una pregunta, como puedo usar el FIle Browser para seleccionar un archivo php o htm y editarlo con el FCKEditor?
- responder
Enviado por Alvaro Ojeda (no verificado) el Lun, 05/28/2007 - 13:46.Hola, he bajado FCKeditor y hemos seguido todas tus instrucciones, pero tengo una duda no se si tiene que poner el editor dentro de la carpeta de archivos que deseo modificar o afuera y una ves hecho esto como podemos utilizar para sustituir textos, imagenes, etc..te agradeceria si me pudieras orientar sobre estas dudas al respecto.
- responder
Enviado por susana (no verificado) el Mié, 05/30/2007 - 13:53.es realmente un buen material que incluso no se lo ve de esta manera en el documento de fck
- responder
Enviado por poloche (no verificado) el Lun, 06/18/2007 - 12:57.Muchas Gracias, excelente aportacion para el desembrutecimiento de nosotros los ignorantes :P
- responder
Enviado por Hector Rodriguez (no verificado) el Lun, 08/20/2007 - 18:59.hola a todos...quisiera saber si hay alguna forma de utilizar el SaveToolBar(Bot
- responder
Enviado por Sam (no verificado) el Jue, 09/06/2007 - 12:03.hola a todos...quisiera saber si hay alguna forma de utilizar el SaveToolBar(Bot
- responder
Enviado por Sam (no verificado) el Jue, 09/06/2007 - 12:24.hola a todos...quisiera saber si hay alguna forma de utilizar el SaveToolBar(Bot
- responder
Enviado por Sam (no verificado) el Jue, 09/06/2007 - 13:32.hola a todos...quisiera saber si hay alguna forma de utilizar el SaveToolBar(Bot
- responder
Enviado por Sam (no verificado) el Jue, 09/06/2007 - 14:59.Hola, t engo el fckeditor ya instalado y funcionando. El programa esta bastante bien pero su importacion de archivos word deja bastante que desear, no sube automaticamente las imagenes y el formato no es del todo correcto. ¿Cual es el WYSIWYG con mejor importaci
- responder
Enviado por Mario (no verificado) el Sáb, 10/06/2007 - 05:43.Mi version del fckeditor para opencms no posee el boton Source, el que se utiliza para la transformaciond de codigo html a la version visual.Si alguien pudiera ayudarme...
- responder
Enviado por maria (no verificado) el Lun, 10/08/2007 - 04:27.Deja tu comentario