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á...
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.
es realmente un buen material que incluso no se lo ve de esta manera en el documento de fck
Muchas Gracias, excelente aportacion para el desembrutecimiento de nosotros los ignorantes :P
hola a todos...quisiera saber si hay alguna forma de utilizar el SaveToolBar(Bot
hola a todos...quisiera saber si hay alguna forma de utilizar el SaveToolBar(Bot
hola a todos...quisiera saber si hay alguna forma de utilizar el SaveToolBar(Bot
hola a todos...quisiera saber si hay alguna forma de utilizar el SaveToolBar(Bot
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
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...
Hola amigo BALU gracias al blog pude configurar mi web con fckeditor, pero todo funciona bien localmente pero al subirlo al servidor no funciona porque?.. ya he actualizado el nombre del servidor, base de datos, usuario, contraseña... pero no puedo logearme para entar.. porque.. debo indicar algo ams a mi provedor. He asignado el atributo de 777 a upload pero nada aun.. porque??.. gracias.la dieccion del editor es: http://www.sistemasyfinanzas.com/arango/articulos.phpy del logeo:http://www.sistemasyfinanzas.com/arango/editlogin.phpespero puedan orientarme gracias.. estoy usando la evrsion de fckeditor que ofrecen en el blog (el que esta correjido para imagenes)
Lucio, he visto el c
Balu ya pude corregir el problema del logeo era por no definir las variables usando POST.. Ahora tengo el problema de que el editor no me guarda lo escrito.. ingreso a mi web se logea, carga el editor , agrego contenido pero pero cuando quiero guardar los cambios no guarda y se pierden los cambios uso este codigo para guardar: <?php include("conex.php"); $link=Conectarse(); $var_id=$TxtIdOcul; $sql ="UPDATE `datos` SET descri = '$FCKeditor1' WHERE id = '1' LIMIT 1"; if ($res=mysql_query($sql,$link)) { ?> <script languaje="JavaScript" type="text/javascript"> window.open("articulos.php?id=1",target="_self"); </script> <?php } else { // echo "Los Datos ya fueron ingresados anteriormente"; } mysql_close($link); ?> En que estoy equiocado?? Gracias por tu atencion...
Lucio, imprime $FCKeditor1 en la web, para ver si la estas recuperando correctamente mediante $_POST.
BALU ya pude corregir mi problema.. era neuvamente el POST.. el codigo correjido es:<?php include("conex.php"); $link=Conectarse(); $FCKeditor1 = $_POST['FCKeditor1']; $var_id=$TxtIdOcul; $sql ="UPDATE `datos` SET descri = '$FCKeditor1' WHERE id = '1' LIMIT 1"; if ($res=mysql_query($sql,$link)) { ?> <script languaje="JavaScript" type="text/javascript"> window.open("articulos.php?id=1",target="_self"); </script> <?php } else { // echo "Los Datos ya fueron ingresados anteriormente"; } mysql_close($link); ?> ------------------------------------------ Ahora me quedaria otra duda.. BALU si quisiera poner el editor en 50 paginas (un poco exagerado creo.. pero un ejemplo) pero si se presentara la oprtunidad de hacerlo tendira que copiar el codigo del editor 50 veces???
tengo un problema quizas no respecto a este tema espesifico pero biendo que conoces el fckeditor bastante bien me animo hacertela.tengo un formulario con muchas opciones ya que la pagina que realizo es sobre noticias y tengo unos campos de texto con un boton para subir imagenes o archivos multimedia dependiendo de lo que necesite como puedo hacer para utilizar la misma ventanita que utiliza el fckeditor? y hacer que dicho resultado me lo coloque en vez de en el editor sea en el campo de texto? desde ya muchas gracias y espero ancioso tu respuesta
Hola, tengo una duda, estoy desarrollando un sistema, para un modulo estoy utilizando fckeditor, me gustaria saber donde y como puedo guardar los archivos html de todo lo que hago en mi editor. por favor.
I
hola balu, muy bueno tu tutorial, sim embargo tengo problemas con el upload de las imagenes. estoy trabajando en jsp y se supone que el zip del fckeditor deberia traer la carpeta jsp de conector y no la trae. y me da el siguiente error: no consigue la direccion"fckeditor/filemanager/browser/default/browser.html?Connector=connectors/jsp/connector" ;porfavor si sabes la respuesta a esta pregunta te lo agradeceria.
Esto no es fallo del editor en s
Añado, el problema es que el script php que genera la carpeta es el apache.Como su uid no coincide con el del usuario me da fallos.
Añado, el problema es que el script php que genera la carpeta es el apache.Como su uid no coincide con el del usuario me da fallos.
Una cosa m
Hola a todos. la pregunta mia se divide en 41. tengo un sitio ya estructurado con plantillas de dreamwearver y nesesito integrar el editor para que el cliente lo puede modificar a su gusto, respetando ciertos patrones del sitio.yo programe un sisitema de validacio nde usuarios en php y mysql que funciona bien, pero no puedo incluir un CMS ya que todos traen sus propias plantillas, yno puedo cambiar el diseño del sitio, solo puedo cambiar los html a php.las preguntas son estas:1. cual es la variable POST para guardar el archivo. ya que se como abrirlo pero ala jhora de guardar por fwrite(), nesesito una variable para guardar, me imagino que viene por POST pero no se cual es.2. hay alguna forma de hacer un "drag n drop" a las imagenes sobre el editor despues de cargadas ?3. se pueden suprimir algunas barras de herramientas de editor; personalizando para diferentes paginas del site,4 la ñapa "como decimos aca" no puedo hacer funcionar el file browser,Gracias que pena lo largo
Páginas