FCKeditor (IV Parte): Personalizando la vista previa

baluart22 Septiembre 2005 - 11:54am 53 comentarios
Enviar por Email Imprimir

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.

Comentarios

Imagen de Luis Vivas

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

Imagen de Mellileo
Mellileo

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!!

Imagen de Anonymous
Anonymous

no encuentro el post donde explicas como validar el FCKEDITOr PHp, Necesito validar la cantidad de caracteres de uno de ellos

Imagen de Victor
Victor

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.

Imagen de Anonymous
Anonymous

hola tengo problemas al subir mi pagina que usa el fck al servidor, para la parte de carga de imagenes y animaciones se pierde la ruta y no puede hacer el proceso

sual es la ruta para los servidores ??????

Imagen de Diego Céspedes

hombre está excelente la guía. tengo un ligero problema. ya el fck edtior me guarda todo en la base de datos, pero a la hora de enseñar el contenido en mi página local no se visualiza nada. ¿Podrías ayudarme con esto?

Imagen de mike_mex
mike_mex

Hola que tal!! espero me puedan ayudar..ya baje el fckeditor y kiero implementarlo en un aplicación .aspx, ya lo hice funcionar y todo, pero kiero programar el boton para guardar el contenido en una base de datos a la cual me conecto por ODBC pero no se donde meterle el código para guardar

saludos!!!

Imagen de cuatrosoles
cuatrosoles

Excelente Tutorial, realmente muy bueno, pero tengo la misma consulta que otro amigo: como puedo usar el FIle Browser para seleccionar un archivo php o htm y editarlo con el FCKEditor en la misma web?

Imagen de Anonymous
Anonymous

Muchas gracias por la info, tuve unos problemas para ingresar a la DB, pero con la funcion replace ('"','|',<>) y luego para imprimirla ('|','"',<>), De nuevo muchas gracias. =xD

Imagen de Anonymous
Anonymous

Muchas gracias por la info, tuve unos problemas para ingresar a la DB, pero con la funcion replace ('"','|',<>) y luego para imprimirla ('|','"',<>), De nuevo muchas gracias. =xD

Imagen de orlando_kara
orlando_kara

Buenos días para todos y gracias de antemano, necesito agregar un espacio de edición de texto al módulo FCKEditor, me refiero a un text área. O sea que además de que se activen las opciones para el formato del texto(la barra de herramientas y demás), se agregue un text área de determinado tamaño. Si alguien me puede ayudar se lo estoy agradeciendo ya...que tengan un buen día. saludos

Imagen de Alicia__
Alicia__

Lo primero, felicitaciones por tu blog.

Lo segundo, tengo un problema con las imágenes en el texto del fckeditor. En IE funciona perfecto, pero en mozilla cuando muevo una imagen arrastrandola por el textarea(drag&drop), me añade "../../" al src de la imagen y no se me muestra. Creo que el problema está en el archivo fckeditorcode_gecko.js, pero es tan extenso que no doy con él. ¿Alguna idea?

Saludos y gracias

Imagen de Anonymous
Anonymous

Amigo tengo un doc Html que modifico mediante el CKEditor, el problema que presento es que que cuando lo abro y ejecuto la primera modificacion y guardo, el CKeditor me borra algunas etiquetas de cabecera y agrega espacios en blanco...sabras porque? y como bloquearcierta parte del codigo para que el CK editor no la modifique

Imagen de baluart
baluart

La vadilación puedes hacerla con php.

Imagen de Carlos Martinez
Carlos Martinez

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

Imagen de Diego

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 ?

Imagen de Balú

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.

Imagen de Hilario
Hilario

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 

Imagen de Bal

Hola Hilario, te comento que por defecto la cuando subes una imagen y la insertas con el explorador de im

Imagen de caro
caro

Hola, quiero saber como puedo sacarle opciones (botones) yo necesito algo mucho mas sencillo solo con opciones basicas poooorfa

Imagen de Carmen
Carmen

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

Imagen de Bal

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

Imagen de Carmen
Carmen

Muchas gracias,  ya lo he solucionado. Al final la opcion del javascript se ajustaba m

Imagen de Arango

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.

Imagen de Bal

HOla Arango, Disculpa, pero no puedo contestarte al mail. Adem

Imagen de Jose Luis
Jose Luis

Grandioso el manual del FCK, grandioso; me has ayudado mucho.Un saludo

Imagen de Alumnos de Artes

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

Imagen de Roberto
Roberto

Excelente manual de ayuda bal

Imagen de Andr
Andr

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 

Imagen de Alvaro Ojeda
Alvaro Ojeda

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?

Páginas

Dejar comentario

Tutoriales

Cómo descargar videos de VK.com
En este artículo voy a explicar como descargar videos y películas...
Descargar Facebook Móvil Gratis
Por si aún no lo han hecho, es posible descargar Facebook Móvil...
Cómo generar tráfico web con las redes sociales - Paso a Paso
Muchas empresas están publicando contenidos como la forma de crear...

Artículo Recomendado

3 Tips cruciales para recuperar archivos eliminados
¿Te imaginas perder el trabajo de toda una semana en tan solo unos segundos? Todos hemos pasado por este problema. Quizás eliminamos por error un archivo importante o lo borramos sin pensar que era valioso para otro... más