wysiwyg_web_edit 1.0 - Readme_spanish.txt para el editor wysiwyg_web_edit desarrollado en la Universidad Internacional de Catalunya (www.unica.edu) (16/07/2001), a partir de las aportaciones de Fernando Álvarez (fer@onplaza.com). El wysiwyg_web_edit es un editor WYSIWYG de código HTML para editar y construir páginas HTML desde un navegador, es decir, en una página web, sin necesitar el Composer, el Frontpage o otros programas especializados. Permite transferir el contenido directamente al servidor mediante un submit o paso por URL. De esta forma se puede fácilmente guardar las páginas en una base de datos. El wysiwyg_web_edit puede ser utilizado tanto con Netscape como con Explorer. Se puede usar como aplicación propiamente o empotrarlo en cualquier página web, y es completamente personalizable por parte del programador que lo incluye en una página. El editor wysiwyg_web_edit está escrito en HTML y Javascript, y utiliza PHP como lenguaje de servidor. (Aunque existe una versión escrita exclusivamente en JavaScript y HTML: ver capítulo 6.- de este documento). Soporta varias instancias en una misma página. (Ver capítulo '3.- Inclusión de múltiples instancias en una página' en este documento para más información). Tiene funciones para construir las estructuras HTML más utilizadas: tablas, links, texto con formato, imágenes, listas numeradas y no numeradas, etc. Sin embargo, no hay funciones para la utilización de frames ni formularios. Ha sido probado en Netscape 4.76 y Explorer 5.0 El editor wysiwyg_web_edit se puede utilizar en tres lenguas diferentes: catalán, español e inglés. El idioma se cambia fácilmente con sólo cambiar un parámetro en el momento de empotrar el editor. Para dudas y sugerencias podéis contactar con gabi@unica.edu. ÍNDICE ====== 0.- Introducción 1.- Instalación 2.- Utilización modular del editor wysiwyg_web_edit. 3.- Inclusión de múltiples instancias en una página. 4.- Editor wysiwyg_web_edit sin PHP. 5.- Función Save. 6.- Recepción en el servidor de la página escrita. 7.- Bugs conocidos. ================================================================================ 0.- Introducción El editor wysiwyg_web_edit consiste en un control ActiveX (Dhtmled.ocx) que viene incluido en la instalación standard de Explorer 5.0 o superior, que es manejado en Netscape a través de un plug-in diseñado para ejecutar controles ActiveX en Netscape. (Este plug-in está desarrollado por la empresa Esker y es de libre distribución. Para más información leer el capítulo '1.- Instalación' de este documento.) Además se añade una botonera de iconos que, a través de funciones Javascript permiten controlar lo que se muestra en el objeto ActiveX (que es el cuadro de texto), de forma que la edición es WYSIWYG según el estilo propio de las herramientas de ofimática.(Incluso las funciones de Cortar, Copiar y Pegar son OLE compatibles y por tanto permiten pegar objetos de ofimática como hojas de cálculo o documentos de texto con formato.) Una vez se ha completado la edición del documento se puede obtener el código fuente HTML correspondiente al documento que se está viendo en el cuadro de texto. Esto se hace mediante una función Javascript que se especifica en uno de los parámetros que se pasan al script PHP que genera el editor. La página del editor se construye dinámicamente en el servidor de forma personalizada, mediante un sistema de parametrización que se detalla en el apartado '2.- Utilización modular del editor wysiwyg_web_edit' de este documento. Para implementar esto se ha utilizado PHP como lenguaje de servidor. Una vez se ha construido y transmitido la página, el cliente puede operar con todas las funcionalidades. Lo que se haga cuando se acabe la página y se haga click en el icono de 'Guardar' depende de la función '$funcio_save' que se pase como parámetro o bien de la página $action_submit que se especifique como parámetro. Por ejemplo se puede pasar (por submit o en la URL) la página a una página del servidor y así registrar su contenido en una base de datos. De esta forma el editor wysiwyg_web_edit constituye una potente herramienta para gestionar un sitio web mediante una base de datos. Las funcionalidades que incluye el editor wysiwyg_web_edit son: 1.- Documento nuevo. 2.- Guardar (a través de una función JavaScript definida por el programador o por submit del contenido a una base de datos). 3.- Cortar, Copiar, Pegar : Ole compatibles, esto es, permite pegar objetos de ofimática como hojas de cálculo o documentos de texto con formato. 4.- Deshacer y Rehacer: permite deshacer (y volver a hacer) todas las acciones desde el inicio de la edición. 5.- Buscar: permite buscar cadenas de caracteres en el documento. 6.- Generación de Links. 7.- Inserción de imágenes. 8.- Color de fondo del documento. 9.- Inserción de tablas. 10.- Funciones para gestión de tablas: añadir fila y columna, suprimir fila y columna, añadir y suprimir celdas, combinar y dividir celdas. 11.- Formateo de texto: tipo y tamaño de letra, color del texto y color de fondo del texto, negrita, cursiva, subrayado. 12.- Alineación de párrafo: derecha, izquierda y centrado. 13.- Generación de listas numeradas y no numeradas. 14.- Indentado y deindentado de párrafos. ================================================================================ 1.- Instalación Para utilizar el wysiwyg_web_edit se debe instalar ciertos componentes en el servidor y ciertos componentes en cada uno de los clientes en los que se vaya a utilizar. INSTALACIÓN EN EL CLIENTE INSTALACIÓN PARA UN CLIENTE NETSCAPE: Para funcionar sobre Netscape, el editor wysiwyg_web_edit requiere la instalación en el cliente de varios elementos: A) Plug-in de la empresa Esker para ejecutar controles ActiveX en Netscape. Es de libre distribución y existen programas de instalación automática en la siguiente mailing list de Yahoo: http://groups.yahoo.com/group/esker-activex-plugin/ Debes registrarte en el grupo para acceder a la descarga del plug-in. Esto es gratis y nada problemático. Una vez registrado se accede a la instalación en la siguiente página de la lista: Files/Versions/Esker ActiveX Plug-in 4.5/demo/npeskp32/install.htm Para Netscape 6.0 se debe descargar la versión 6.0 del Plug-in. El plug-in se instala automáticamente siempre y cuando se tenga el SmartUpdate de Netscape habilitado. (De hecho, para instalar el plug-in basta con copiar el archivo NPESKP32.dll en el directorio de plug-ins de Netscape). B) Se debe instalar el control ActiveX PropertyAccessor que se encuentra en la misma mailing list en: http://groups.yahoo.com/group/esker-activex-plugin/ Debes registrarte en el grupo para acceder a la descarga del control ActiveX PropertyAccessor. Una vez registrado se accede al archivo accessor.ocx en: Files/Miscellaneous/Properry Accessor/accessor/accessor.ocx Se debe copiar en cualquier directorio del disco duro (por ejemplo en c:\my_path\) local y después ejecutar en línea de comandos (Inicio -> Ejecutar ): regsvr32.exe "c:\my_path\accessor.ocx" C) Se debe tener installado el control ActiveX Dhtmled.ocx. Este control se instala automàticamente en la installación standard de Explorer, así que si se ha instalado Explorer no es necesario hacer nada. Si no se quiere instalar Explorer se debe copiar los archivos Dhtmled.ocx i TRIEDIT.dll (que se encuentran en cualquier cliente Windows98 con Explorer instalado) en la carpeta (si no existe se debe crear): 'Archivos de Programa / Archivos comunes / Microsoft Shared / TRIEDIT'. INSTALACIÓN PARA UN CLIENTE EXPLORER: No se requiere ninguna instalación especial para explorer, porque el control ActiveX Dhtmled.ocx viene por defecto con la instalación de Explorer 5.0 o superior. Si no funciona sobre explorer se debe copiar los archivos Dhtmled.ocx y TRIEDIT.dll (que se encuentra en cualquier cliente Windows98 con Explorer instalado ) en el directorio 'Archivos de Programa / Archivos comunes / Microsoft Shared / TRIEDIT'. INSTALACIÓN EN EL SERVIDOR Una vez instalados los dos componentes anteriores se debe copiar todos los archivos contenidos en wysiwyg_web_edit.tar.gz en un directorio (lo cual conservará la estructura definida, con todos los archivos *.gif en el subdirectorio 'images'). Entonces se debe editar el archivo "wysiwyg_web_edit.h3p". Se debe dar valor a dos parámetros: $url_path_editor = "http://my_server/my_applications/wysiwyg_web_edit/"; // URL del directorio de la aplicación $abs_path_editor = "/absolute_path/wysiwyg_web_edit/"; // Path absoluto (para el servidor de páginas web), del editor wysiwyg_web_edit en el servidor en el que se incluye la aplicación. Esto es para que se puedan hacer los 'include' correspondientes independientmente del documento en el que se empotra el editor wysiwyg_web_edit. Además se requiere como mínimo PHP 3.0 en el servidor. Si no se tiene PHP se puede tener una versión no configurable del editor. Ver el apartado '4.- Editor wysiwyg_web_edit sin PHP' de este mismo documento. NOTA: todos los ficheros PHP de la aplicación tienen la extensión 'h3p' porque esa es la extensión que nuestro servidor Apache utiliza para reconocer qué archivos deben ser parseados por PHP. Si se utiliza 'php3' o cualquier otra extensión se debe hacer lo siguiente: a) Cambiar las extensiones de todos los archivos '*.h3p' y poner la nueva extensión (por ejemplo '*.php3'). b) Reemplazar la cadena '.h3p' por la que corresponda a tu extensión (por ejemplo '.php3') en todos los archivos '*.h3p'. O bien, y quizás más simple, configurar el servidor de páginas web para que reconozca '.h3p' como una extensión asociada a PHP. ================================================================================ 2.- Utilización modular del editor wysiwyg_web_edit Para poder utilizar el editor wysiwyg_web_edit como un módulo empotrado en un documento cualquiera se debe hacer lo siguiente: A) En el documento PHP poner las líneas de parametrización. La lista de parámetros y el significado de sus valores es el siguiente (se muestra un ejemplo, con los valores por defecto para los parámetros): $nom_editor = "Ed1"; // Nombre que tomará el objeto editor en la página. Debe ser diferente de todos los objetos JavaScript en la misma página. Si se incluye más de una instancia del editor en una misma página, cada uno de los nombres debe ser distinto. $idi_edit = 'eng'; // Idioma de utilización: 'eng' -> inglés, 'esp' -> español, 'cat' -> catalán. $document_complet = 1; // Si vale 1 se está editando un documento completo, y por tanto, el código HTML que recibirá la función save o que se mandará por submit será con tags ... . Si vale 0, se está editando una parte de un documento y por tanto el código HTML será sin ... . $funcio_save= 'my_save_function(codigo);'; // Nombre de la función Javascript que se llamará al hacer click sobre el icono de guardar. Siempre debe tener un parámetro, que recibirá el código generado. Desde esta función, que debe suministrar el programador, se puede enviar el contenido a alguna url, etc. Si no se quiere dar una función JavaScript se puede utilizar el siguiente parámetro. $action_submit = "sample_submit.h3p"; // Url del archivo al que se mandará por submit el código HTML generado. Esta opción se utiliza si no se ha definido el parámetro $funcio_save. $editor_width = 700; // Anchura (en pixels) del cuadro de texto del editor. $editor_height= 400; // Altura (en pixels) del cuadro de texto del editor. $content_inicial = "Hello World"; // Contenido inicial a cargar en el cuadro de texto. Tiene que ser código HTML. No puede contener saltos de linea (deben figurar como
). B) Entonces, una vez escrita la parametrización se hará: include " ...path_del_editor/wysiwyg_web_edit.h3p"; CON LOS ARCHIVOS DE LA APLICACIÓN SE INCLUYE UN EJEMPLO EN EL QUE SE PUEDE VER LA PARAMETRIZACIÓN. ESTÁ EN 'Sample.h3p'. OBSERVACIONES ============= Se debe saber además que en el documento en el que se empotre el editor no se podrán utilizar los siguientes nombres de variables y funciones: * Para PHP: -Variables: $nom_editor $idi_edit $document_complet $funcio_save $action_submit $editor_height $editor_width $content_inicial $url_path_editor $abs_path_editor $noset $navegador $insertat_editor $mesg1, $mesg2, $mesg3, $mesg4, $mesg5, $mesg6, $mesg7, $mesg8, $mesg9, $mesg10, $mesg11, $mesg12, $mesg13, $mesg14, $mesg15, $mesg16, $mesg17, $mesg18, $mesg19, $mesg20, $mesg21, $mesg22, $mesg23, $mesg24, $mesg25, $mesg26, $mesg27, $mesg28, $mesg29, $mesg30, $mesg31, $mesg32, $mesg33, $mesg34, $mesg35, $mesg36, $mesg37, $mesg38, $mesg39, $mesg40, $mesg41, $mesg42 -Funciones: PropAcce_string($situ,$nomeditor,$property,$value) * Para Javascript: -Variables: obj_editor PropertyAccessor ObjTableInfo wol DECMD_BOLD DECMD_COPY DECMD_CUT DECMD_DELETE DECMD_DELETECELLS DECMD_DELETECOLS DECMD_DELETEROWS DECMD_FINDTEXT DECMD_FONT DECMD_GETBACKCOLOR DECMD_GETBLOCKFMT DECMD_GETBLOCKFMTNAMES DECMD_GETFONTNAME DECMD_GETFONTSIZE DECMD_GETFORECOLOR DECMD_HYPERLINK DECMD_IMAGE DECMD_INDENT DECMD_INSERTCELL DECMD_INSERTCOL DECMD_INSERTROW DECMD_INSERTTABLE DECMD_ITALIC DECMD_JUSTIFYCENTER DECMD_JUSTIFYLEFT DECMD_JUSTIFYRIGHT DECMD_LOCK_ELEMENT DECMD_MAKE_ABSOLUTE DECMD_MERGECELLS DECMD_ORDERLIST DECMD_OUTDENT DECMD_PASTE DECMD_REDO DECMD_REMOVEFORMAT DECMD_SEND_BACKWARD DECMD_BRING_FORWARD DECMD_SEND_BELOW_TEXT DECMD_BRING_ABOVE_TEXT DECMD_SEND_TO_BACK DECMD_BRING_TO_FRONT DECMD_SETBACKCOLOR DECMD_SETBLOCKFMT DECMD_SETFONTNAME DECMD_SETFONTSIZE DECMD_SETFORECOLOR DECMD_SPLITCELL DECMD_UNDERLINE DECMD_UNDO DECMD_UNLINK DECMD_UNORDERLIST DECMD_PROPERTIES OLECMDEXECOPT_DODEFAULT DECMDF_NOTSUPPORTED DECMDF_DISABLED DECMDF_ENABLED DECMDF_LATCHED DECMDF_NINCHED DEAPPEARANCE_FLAT EAPPEARANCE_3D OLE_TRISTATE_UNCHECKED OLE_TRISTATE_CHECKED DECMD_SELECTALL OLE_TRISTATE_GRAY OLECMDEXECOPT_PROMPTUSER OLECMDEXECOPT_DONTPROMPTUSER -Funciones: alin_dreta() alin_esq() bg_color_posa(int) canvi_imatge(string,string) centrat() cercar() combinar_celdas_table() contingut_html(string) copiar() cortar() cursiva() deindentat() desfer() doc_bgcolor_posa(string) elim_celda_table() elim_col_table() elim_fila_table() fer_link() fg_color_posa() Fontname_onchange() FontSize_onchange() indentat() ins_img() insert_celda_table() insert_col_table() insert_fila_table() insert_table(int,int,string,string,string) llista_no_num() llista_numerada() MakeArray(int) mostra_insert_table() mostra_pal_fg_color() mostra_pal_bg_color() mostra_pal_doc_bgcolor() negreta(object_textarea) nou_doc(object_textarea) paleta_colors(string) pegar() posa_contingut_html(string,string) refer() salvar_html(string) split_celdas_table() strip_body(string) subry() taula_colors() Tampoco se puede utilizar nombres para elementos de formulario, imágenes, variables JavaScript y funciones Javascript que empiecen por el nombre dado al editor en el parámetro $nom_editor. ================================================================================ 3.- Inclusión de múltiples instancias en una página. Para incluir multiples instancias del wysiwyg_web_edit en una misma página basta con repetir la parametrización y la sentencia include " ...path_del_editor/wysiwyg_web_edit.h3p". Lo importante es asignar un valor distinto cada vez al parámetro $nom_editor. Hay un archivo-ejemplo en 'Sample_multi.h3p'. ================================================================================ 4.- Editor wysiwyg_web_edit sin PHP Si no se tiene PHP o no se quiere utilizar, con la aplicación se incluye una versión del editor exclusivamente en HTML y Javascript. El archivo en español es "ie_wysiwyg_web_edit_spanish.html" para Explorer y "ns_wysiwyg_web_edit_spanish.html" para Netscape. La única cosa que tiene que hacer es editar el archivo para arreglar la URL de los iconos de la aplicación.(Es decir, cambiar el valor del atributo src de los tags ). Si se tienen conocimientos de HTML y JavaScript se puede editar este archivo para seleccionar sólo la parte que interesa (entre y ) para pegarla en cualquier otro documento. ================================================================================ 5.- Función Save. El código HTML generado se puede acceder de dos maneras: a) La función JavaScript especificada en el parámetro $funcio_save recibe como parámetro el código HTML generado. En el cuerpo de esta función, que debe ser incluido en la página por el programador que empotra el wysiwyg_web_edit, se puede enviar el contenido al servidor. Por ejemplo, si se quiere enviar el contenido a la página 'save.h3p' el codigo podría ser: (suponemos que en la parametrización hemos especificado $funcio_save = 'my_save_function(code)'; ): function my_save_function(code){ // Aquí se puede tratar el codigo, que está en la variable code code = escape(code) document.location = "save.h3p?htmlcode=" + code return true } b) Si en la parametrización se especifica algún valor para $action_submit, al hacer click sobre el icono de guardar se enviará el código generado a la página que se llama como $action_submit. El contenido se recibe en la variable 'nombre_editor_contingut_html'. Por ejemplo: $nom_editor = "my_editor"; $action_submit = "save.h3p"; Entonces al hacer click en 'guardar' se llamará a la página 'save.h3p' y se le enviará la variable de nombre '$my_editor_contingut_html'. Así en la página 'save.h3p' se puede acceder una base de datos y guardar el codigo html. Recuérdese que si se quiere recuperar exactamente el contenido original, en la página de recepción (en este caso 'save.h3p' ) se debe hacer: $my_editor_contingut_html = stripslashes( $my_editor_contingut_html ); Con los ficheros de la aplicación se suministra un ejemplo de esto, en los ficheros 'Sample_submit.h3p' y 'Submit_reception.h3p'. NOTA: es importante saber que por razones de seguridad, desde el wysiwyg_web_edit NO SE PUEDE GUARDAR EN EL CLIENTE la página generada. ================================================================================ 6.- Recepción en servidor de la página escrita. Si se envia el código generado a una página del servidor, será necesario aplicar alguna función para pasar los caracteres especiales a su codificación HTML. (Ejemplo: À->À ). Con los archivos de la aplicación se facilita la función (en php) convert_html($string); en el archivo 'convert_html.h3p', que realiza esta conversión. (Contiene 94 caracteres especiales). No se debe olvidar que la función 'escape(code)' de Netscape no va bien, porque los signos '+' (al aplicar la decodificación) quedan convertidos en espacios en blanco. Se debe entonces, antes de aplicarla, convertir los '+' a algún carácter reservado (p.e. '´') y realizar la descodificación inversa al recibir el valor. Además, recuérdese que si se quiere recuperar exactamente el contenido original, en la página de recepción se debe hacer: $my_editor_contingut_html = stripslashes( $my_editor_contingut_html ); ================================================================================ 7.- Bugs conocidos El wysiwyg_web_edit presenta algunos bugs en tiempo de edición, como por ejemplo la pérdida del color de fondo del texto al cambiar el color de los caracteres del texto. Estos bugs son propios del control ActiveX suministrado por Microsoft (Dhtmled.ocx). Si se detectan bugs asociados al código PHP, JavaScript o HTML se pueden reportar a gabi@unica.edu. ================================================================================