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.
Si te gustó este artículo también te gustará...
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
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!!
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
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
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
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
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
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?
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!!!
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?
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 ??????
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.
no encuentro el post donde explicas como validar el FCKEDITOr PHp, Necesito validar la cantidad de caracteres de uno de ellos
La vadilación puedes hacerla con php.
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
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 ?
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.
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
Hola Hilario, te comento que por defecto la cuando subes una imagen y la insertas con el explorador de im
Hola, quiero saber como puedo sacarle opciones (botones) yo necesito algo mucho mas sencillo solo con opciones basicas poooorfa
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
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
Muchas gracias, ya lo he solucionado. Al final la opcion del javascript se ajustaba m
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.
HOla Arango, Disculpa, pero no puedo contestarte al mail. Adem
Grandioso el manual del FCK, grandioso; me has ayudado mucho.Un saludo
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
Excelente manual de ayuda bal
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
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