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

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.

Imagen de poloche

es realmente un buen material que incluso no se lo ve de esta manera en el documento de fck

Imagen de Hector Rodriguez

    Muchas Gracias, excelente aportacion para el desembrutecimiento de nosotros los ignorantes :P

Imagen de Sam
Sam

hola a todos...quisiera saber si hay alguna forma de utilizar el SaveToolBar(Bot

Imagen de Sam
Sam

hola a todos...quisiera saber si hay alguna forma de utilizar el SaveToolBar(Bot

Imagen de Sam
Sam

hola a todos...quisiera saber si hay alguna forma de utilizar el SaveToolBar(Bot

Imagen de Sam
Sam

hola a todos...quisiera saber si hay alguna forma de utilizar el SaveToolBar(Bot

Imagen de Mario
Mario

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

Imagen de maria
maria

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

Imagen de Lucio Arango

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) 

Imagen de Bal

Lucio, he visto el c

Imagen de Lucio Arango

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

Imagen de Bal

Lucio, imprime $FCKeditor1 en la web, para ver si la estas recuperando correctamente mediante $_POST.

Imagen de Lucio Arango

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

Imagen de Virla

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  

Imagen de FUEL SIRPA MAMANI

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.

Imagen de asselpLal
Imagen de yzavela
yzavela

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. 

Imagen de Jorge
Jorge

Esto no es fallo del editor en s

Imagen de Jorge
Jorge

    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.

Imagen de Jorge
Jorge

    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.

Imagen de Jorge
Jorge

Una cosa m

Imagen de D-NisKaV
D-NisKaV

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

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