Crea un Editor HTML Online

  • 19/11/2006
  • 12:15 am
  • unijimpe

TinyMCE es una solución completa para crear Editores de Texto para tus formularios HTML, todo con código sencillo y compatible con la mayoría de navegadores.

En un post anterior hablamos de los diferentes editores web online que hay en el mercado y entre ellos hablamos de TinyMCE y esta vez explicaremos como integrar este editor con tu formulario html.

tiny1.gif

El primer paso es descargar los archivos fuentes con la librería TinyMCE 2.0.8, luego de extraer los archivos copia el contenido de la carpeta /tinymce/jscripts/tiny_mce al directorio donde se encuentran los archivos js de tu proyecto por ejemplo scripts.

Luego creamos un nuevo archivo html donde estará nuestro editor e incluimos una referencia a la librería recién descargada.

JavaScript:
  1. <script language="javascript"
  2. type="text/javascript" src="scripts/tiny_mce.js"></script>

El siguiente paso es crear un formulario donde aparecerá nuestro editor, para ello creamos un campo de tipo textarea el cual editor.

HTML:
  1. <form method="post">
  2. <textarea name="content" cols="60" rows="16">
  3. Texto de prueba en TinyMCE.
  4. </textarea>
  5. </form>

El siguiente paso es asignar que todos los campos textarea puedan mostrar el editor, ello se hace con el siguiente código.

JavaScript:
  1. <script language="javascript" type="text/javascript">
  2. tinyMCE.init({
  3.     mode : "textareas"
  4. });
  5. </script>

Finalmente el código completo del HTML con nuestro editor online sería el siguiente.

HTML:
  3. <title>Editor Online</title>
  4. <script language="javascript" type="text/javascript"
  5. src="scripts/tiny_mce.js"></script>
  6. <script language="javascript" type="text/javascript">
  7. tinyMCE.init({
  8.     mode : "textareas"
  9. });
  10. </script>
  11. </head>
  13. <form method="post">
  14. <textarea name="content" cols="60" rows="16">
  15. Texto de prueba en TinyMCE.
  16. </textarea>
  17. </form>
  18. </body>
  19. </html>

tiny001.jpg

TinyMCE te permitirá personalizar completamente el editor recién creado con multiples opciones que estan muy bien documentadas, por ejemplo si deseamos colocar solo los botones que necesitamos el código siguiente nos puede ayudar.

JavaScript:
  1. tinyMCE.init({
  2.     mode : "textareas",
  3.     theme : "advanced",
  4.     theme_advanced_buttons1 : "bold,italic,underline,separator,strikethrough,justifyleft,justifycenter,justifyright, justifyfull,bullist,numlist,undo,redo,link,unlink",
  5.     theme_advanced_buttons2 : "",
  6.     theme_advanced_buttons3 : "",
  7.     theme_advanced_toolbar_location : "top",
  8.     theme_advanced_toolbar_align : "left",
  9.     theme_advanced_path_location : "bottom",
  10.     extended_valid_elements : "a[name|href|target|title|onclick],img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name],hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]"
  11. });

tiny002.jpg

Puedes encontrar mas ejemplos en la página oficial o puedes descargar los archivos de ejemplo de este post.

Posts Relacionados

Introducción a jQuery

  • 18/11/2006
  • 2:22 pm
  • unijimpe

JQuery es una librería javascript para manejar los elementos DOM o CSS de una página HTML. No es una extensa librería para manejar AJAX si no tiene funciones para ayudarnos a escribir javascript de forma mas sencilla. Este post esta basado en Introducción a Jquery de Choan Gálvez, licenciado bajo Creative Commons, si buscan una referencia mas completa puedes visitar el post original.

jquery.jpg

Conceptos Básicos

Primero explicaremos la idea básica de jQuery, esto es el uso de la función $ con lo cual se tiene acceso a los elementos DOM utilizando selectores CSS o, si lo preferimos, XPath.

Pero que significa esto?, bueno típicamente para acceder a un elemento del HTML que tenga como in por ejemplo myelem, se tiene que utilizar getElementById.

HTML:
  1. <div id="myelem">texto de prueba</div>
  2. <script type="text/javascript">
  3.    myid = document.getElementById("myelem");
  4.    myid.style.color = "blue";
  5. </script>

Pero si utilizamos jQuery ahora podemos acceder directamente al elemento utilizando la función $.

HTML:
  1. <div id="myelem">texto de prueba</div>
  2. <script type="text/javascript">
  3.    $('#myelem').css({'color': 'blue'});
  4. </script>

Veamos algunos ejemplos de como accedes a elementos html.

JavaScript:
  1. // todos los elementos de tipo 'e'
  2. $('e');
  3. // elementos de tipo 'e' descendientes de elementos de tipo 'f'
  4. $('f e');
  5. // elementos de tipo 'e' hijos de elementos de tipo 'f'
  6. $('f> e');
  7. // elementos con clase 'mycls'
  8. $('.mycls');
  9. // elementos con identificador 'contacts'
  10. $('#contacts');
  11. // elementos de tipo 'e' que contienen  un atributo 'foo'
  12. $('e[@foo]');
  13. // elementos de tipo 'e' que contienen
  14. // un atributo 'foo' con valor 'bar'
  15. $('e[@foo="bar"]');

Manipulación de Elementos

Otra de las carácteristicas de jQuey es que podemos manipulas las propiedades de los elementos a los cuales hemos accedido.

JavaScript:
  1. // añadir clases a un elemento
  2. $('a').addClass('alt');
  3. // quitar clases a un elemento
  4. $('tr').removeClass('nclass');
  5. // asignar reglas de estilo
  6. $('td').css({'border': '4px solid red', 'color': 'red'});

Manejadores de eventos

Los métodos bind y unbind nos permiten asignar y deasignar manejadores de eventos. En el módulo de eventos avanzados, disponemos de algunos extras, como click, unclick, oneclick. Por ejemplo:

JavaScript:
  1. # // al hacer click sobre la cabecera de una tabla
  2. # // se disparará la función '$.sortableTable.onclickSort'
  3. # $('thead th').bind('click', $.sortableTable.onclickSort);

Adicionalmente se tiene otro método de nombre hover, acepta como parámetros dos funciones. La primera de ellas se ejecutará cuando el ratón se posicione sobre el elemento, la segunda, cuando salga de él.

JavaScript:
  1. $('tbody tr').hover(
  2.    function(e) {
  3.       $(this).addClass('over');
  4.    },
  5.    function(e) {
  6.       $(this).removeClass('over');
  7.    }
  8. );

Posts Relacionados

PageBar v1.2 para WordPress

  • 18/11/2006
  • 11:43 am
  • unijimpe

PageBar es un plugin para WordPres que te permitirá agregar una barra de navegación de paginación para tus post. Te permitirá agregar botones anterior, siguiente y seleccionar una página especifica para seleccionar.

pic1.png

pic2.png

Entre las características principales es que te permite configurar el texto de inicio y también puedes modificar los colores para adaptarlo a tu theme con la hoja de estilos que viene incluida.

Instalación

Para la instalación lo primero que tienes que haces es descargar el archivo en PageBar v1.2, luego lo descomprimes y subes el archivo pagebar.php a la carpeta de plugins de tu WodPress (tipicamente /wp-content/plugins/). El siguiente paso es abrir el archivo de estilos pagebar.css y copiar todo el contenido al archivo CSS de tu template.

Utilización

Para utilizar este plugin debes editar los archivos de tu template, por ejemplo el archivo index.php y al final del loop para mostrar los posts colocas el siguiente código:

PHP:
  1. <?php wp_pagebar(array('before'=>'Pages: '))?>

Esta es la sintaxis básica si deseas mas opciones puedes encontrarlas en la documentación del plugin que es muy descriptiva.

Posts Relacionados