etiquetags 1.0

sisi escribió esto a las 12:00

(Actualización: 09-12-2006) Ya está disponible para su descarga la nueva versión de etiquetags: etiquetags1.1

logo de etiquetagsHará un mes más o menos que os hablaba de mis pinitos con Javascript y ciertas modificaciones de la barra de edición quicktags (y de JS-Quicktags, creados ambos por Alex King) que utiliza WordPress 2.0.4 para la edición no WSYIWYG de nuestros artículos.
Lo que empezó como un pasatiempo, fue poco a poco cobrando cada vez más entidad, en gran medida gracias a Cruzul y su entusiasmo, y se ha convertido en lo que ambos creemos es el editor de etiquetas HTML que queríamos tener y no encontrábamos: ligero, sencillo, escribiendo código totalmente limpio y de acuerdo con el estándar XHTML1.0 Strict del W3C, con funciones de previsualización del resultado, formularios para rellenar cómodamente los atributos de las etiquetas, construcción automática de listas y ¿por qué no? todo ello con un diseño muy atractivo y fácilmente configurable al gusto de cada usuario.

etiquetags en WordPress

Disponible, hasta ahora, en cinco idiomas, en-es-fr-gl-pt, etiquetags incorpora herramientas lingüísticas tales como diccionarios, correctores o traductores (dependiendo de la disponibilidad de dichas herramientas para cada idioma) o búsqueda de acrónimos …
En fin, que si queréis saber más sobre etiquetags podéis dirigiros a su web: http://sisifodichoso.org/etiquetags/
donde, además de secciones de documentación y descarga, existe una demo en los cinco idiomas para que podáis probar todas las funciones del programa.
Y, por supuesto, que toda sugerencia o comentario será bienvenido :-)

Comparte este artículo:
  • Meneame
  • del.icio.us
  • Digg
  • Facebook
  • TwitThis
  • Google
  • Live
  • E-mail this story to a friend!
  • Print this article!

26 comentarios en “etiquetags 1.0”


  1. Cruzul dice:

    Etiquetags, un novo xeito de editar o noso blog.

    Se publicamos en XHTML, transitional ou strict, mis que probable que ata non sexa fcil atopar un editor de escritorio que dispoa de tdalas etiquetas que precisamos. Etiquetags ven da man de Sisifodichoso a aportar unha solucin.


  2. Ana* dice:

    Bueno, bueno, menudo par de bombazos has/habéis soltado hoy, a cual mejor. Me tengo que ir a correr, pero esta noche a ver si me pongo a fondo con el etiquetags. Se me cae la baba.

    (Pequeño comentario sobre el diseño: los caracteres especiales -tildes y todo eso- me aparecen bien en el texto de las entradas, pero no aparecen en los comentarios; ¿me pasa a mí sola?)


  3. Stahn dice:

    Ohh… esto es mejor que cualquier WYSIWYG. Lo voy a difundir en el foro de WordPress a ver si hacen algo util :P

    Gracias por el trabajo.

    PD: Ana*, los posts que tienen problemas son pingbacks. O trackbacks, ni se cuales son.


  4. yudoc dice:

    Tienen pensado desarrollar alguna versión para poder usarlo en otros CMS? Como Drupal, Mambo, etc.
    Buen trabajo


  5. Alfonso dice:

    Os felicito a los autores!!!! Acabáis de incorporaros a ese 1%, que, según dicen, contribuye a los proyectos abiertos. El resto, o bien somos comentaristas (9%), o simples pasajeros (90%). Me parece genial lo que habéis hecho. :)


  6. sisifodichoso dice:

    Muchísimas gracias a ti, Sthan, por ayudar a difundirlo.
    Esperamos que resulte útil,
    Un saludo

    En principio, yudoc, puede ser adaptado fácilmente a cualquier CMS. Pero ya que lo sugieres, puede ser una muy interesante línea de trabajo para seguir … gracias a ti por tu comentario

    Gracias Alfonso :-D qué sería de nosotros sin vuestros comentarios … te confesaré que nos lo hemos pasado pipa haciéndolo, así que si encima interesa … pues eso ¿qué más queremos?


  7. Ana* dice:

    Ya me lo he instalado, y qué bien, compañera. Mira que sois guays. :-)

    Hasta hay botoncitos que no sé para qué sirven, así que me voy a poner al día con lo de las etiquetas.

    Se me había olvidado: que mil gracias.


  8. sisifodichoso dice:

    No sabes cuanto te lo agradezco yo a ti Ana*. No dudes en contarnos cualquier cosa que se te ocurra.
    Un abrazo :-)


  9. Innovacionweb.com - Málaga dice:

    Esta muy bien, felicidades.

    Aunque uso Moxiecode para mis clientes, la verdad es que el vuestro es una alternativa excelente para aquellos clientes que se atrevan con el XHTML.

    Estoy pensando en usar los 2 y que el cliente escoja.


  10. sisifodichoso dice:

    ¡¡Muchas gracias!! :-)
    Esa es precisamente la idea: que sea una alternativa más cómoda y amigable para aquellos que quieran tener más control sobre el código XHTML …
    En WordPress existe también la alternativa de usar TinyMCE … como siempre, es cuestión de gustos e intereses y está muy bien dar alternativas para todos :-)


  11. LA100RRA dice:

    Vaya, pués si que lo han hecho bien, muchas gracias por hacernos la vida más fácil.

    Ya antes, me había modificado mi quicktags.js para agregar algunas etiquetas que suelo usar y no vienen por default (hasta puse un minitutorial de como hacerlo y tal), pero la verdad es que los botones ocupaban demasiado espacio, con ésta opción queda muy bien y se vé mucho mejor. :D


  12. sisifodichoso dice:

    Exactamente así empecé yo: modificando quicktags poco a poco … la idea de ir más allá y de ponerle iconos fue de
    cruzul


  13. JJRC dice:

    ¿Hay forma de incluirlo en Drupal?


  14. sisifodichoso dice:

    Hola JJRC
    en principio no se debería tener ningún problema al instalarlo en cualquier CMS sin más que adaptando las intrucciones de instalación general en cualquier textarea al caso concreto: eso es lo que hicimos en WordPress y en Dotclear.
    En cuanto lo probemos en Drupal o Mambo os avisamos y si alguien lo prueba antes, pues eso que avise y nos cuente la experiencia :D


  15. lautaro dice:

    Muchas gracias!
    Ahora mismo lo estoy poniendo en mi WP!!! y si no se me complica mucho, se lo voy a agregar a los comentarios (así todos podemos hacer un buen hilo como la gente)

    Espero poder hacerle propaganda en mi weblog.

    Suerte, y gracias! :)


  16. sisifodichoso dice:

    ¡¡Muchas gracias a ti lautaro!!
    si se lo agregas a los comentarios, estaríamos encantados de compartir tu experiencia.
    Un saludo :-)


  17. lautaro dice:

    Hola, me parece raro el hecho de que tenga que poner la dirección http://evaklo.sytes.net para que capture los íconos y otras yerbas. Porque de esa manera los estoy capturando desde internet, y eso es medio extraño. Hay alguna manera de que se haga esto localmente?

    Muchas gracias!

    pd: en el help de instalación le corregiría una cosita: pusiste que la dirección absoluta es de este tipo: “http://MiSitio/wp-includes/js/iconos/” bien, eso podría ser falso.

    Tendría que ser algo del estilo:
    “http://MiSitio/…(carpeta de WP)/wp-includes/js/iconos/”

    Eso lo vi, dado que yo NO tengo instalado WP en el root de mi servidor (por cuestiones de jodón que soy)

    Espero qyue se entienda la pequeña diferencia.

    Suerte!!! :mrgreen:


  18. sisifodichoso dice:

    Si a lo que te refieres es a poner una ruta relativa, acabo de probar y a mí me funciona esto:
    var IconDir = '/wp-includes/js/iconos/';
    var FormDir = '/wp-includes/js/forms/';

    Sí se entiende la diferencia que comentas … aunque creo mejor poner una ruta relativa que le valga a todo el mundo (no lo había mirado hasta ahora, la verdad) … y ya que has sacado el tema ;-) ¿me dirías si éstas te funcionan a ti que no tienes el blog en el root?
    Cambiaría ese punto en la faq y facilitaría así la instalación …

    ¡Gracias! :-)


  19. sisifodichoso dice:

    Lo he probado en mi servidor local. En tu caso sería:
    var IconDir = '/(directorio de wordpress)/wp-includes/js/iconos/';
    var FormDir = '/(directorio de wordpress)/wp-includes/js/forms/';

    espero que te sirva :-)


  20. Cruzul dice:

    Hola Lautaro y Sisifodichoso:
    Dado que en la práctica todos nos organizamos a nuestra manera, ahí va otro ejemplo.

    Yo los iconos los tengo todos dentro del directorio “images” que está al mismo nivel que el “js” (es con el Dotclear pero es lo mismo para esto).
    Y los “forms” al mismo nivel que “images” y “js”.

    Entonces las rutas las pongo así:

    var IconDir = ‘./images/’;
    var FormDir = ‘forms/’;


  21. Cruzul dice:

    :oops:
    He copiado mal, al final debería decir:

    Entonces las rutas las pongo así:

    var IconDir = ‘images/’;
    var FormDir = ‘forms/’;


  22. Luis Ramos dice:

    Hola!

    os pongo varias cosillas:

    1.- (la más importante!!):
    pues la verdad es que no me ha funcionado en WordPress… Ni en el 2.0.4, ni en el 2.0.5 que me acabo de instalar tampoco… :(

    He seguido las instrucciones al pie de la letra y sigo viendo el editor del TinyMCE que trae el WordPress.

    He probado a grabar en el disco duro la página, para ver qué ficheros está utilizando, y sí veo el quicktags.js ‘vuestro’, pero como digo, en pantalla sale el editor Tiny.

    ¿No hay que modificar ningún otro fichero (el tiny_mce_gzip.php veo que también me aparece como usado en la página de posts… no habrá que tocar algo más por ahí???).

    2.-
    En la página de ‘Demo’ pone que para ver el resultado ‘Pulsa el previo para ver cómo se visualizará tu texto en un navegador…’

    ¿Dónde está el botón ‘Previo’??? No lo veo!!!

    3.-
    Aún así, estoy batallando con ésto para que me funcione, porque me ha enamorado sólo con ver la página de Demo. Espero que os apiadeis de un pobre infeliz que no consigue hacer que ésto chute, y que tiene ganas locas de probarlo pero ya!!

    Saludos,
    Luis


  23. sisifodichoso dice:

    Hola Luis,
    1.- Si ves el Tynimice es porque no lo has desactivado previamente. etiquetags no sustituye a Tynimice sino a quicktags. Entonces:
    vete a “usuarios” en la administración de wordpress y desactiva: Utilizar el editor visual para escribir
    2.- Si abres con un editor de texto, el que tú quieras, el archivo etiquetags.js o , como ya lo has renombrado, el quicktags.js, verás que al principio del archivo están definidos los botones. Bien, decidimos comentar el de previo en wordpress puesto que este programa ya tiene una función de previo. Ahora bien, si quieres verlo: descomenta el botón de previo, es decir quita los /* */ donde pone
    /*edButtons.push(
    new edButton(
    'ed_prev' ...etc */

    y luego activa la función de previo en otra ventana, busca /**** Preview functions ****/ comenta //Preview in the same window es decir encierra el código con /* … */
    y descomenta //Preview in a new window with styles …

    Con esto que te digo, debería funcionarte… dímelo si no es así. Y no te preocupes por preguntar lo que sea, esto también nos ayuda a mejorar la documentación. Otra cosita, hay un bug en el funcionamiento con IE que ya está prácticamente solucionado. Para este fin de semana sacaremos la versión 1.1 con el bug resuelto (no dejaba insertar imágenes) Te lo digo por si prefieres esperarte. Ya que lo has sugerido, vamos a dejar el botón de previo en otra ventana habilitado para el que lo quiera en wordpress… bueno, pues eso
    Gracias a ti Luis y un saludo. :-)


  24. Luis Ramos dice:

    Eyyyyyyy!

    ya me funciona, ya está, era eso del desactivado en el usuario… (ponedlo en la documentación, que yo ni me había dado cuenta de esa opción… yo lo desactivaba en Opciones-Escritura, pero no en Usuario).

    También he re-activado el botón de Vista Previa, y sí, ya me aparece en pantalla y funciona. Todo OK y esperando la 1.1… ;)

    Me ha dejado mosqueado lo que dices de que el WordPress ya tiene una Vista Previa, pues yo no la he visto. El Tiny en sí mismo es WYSIWYG, pero lo de Vista previa lo veo con el Tiny activado, ¿o no?. Así con los quicktags activados no veo ese opción de Preview que mencionas…

    Por último, una petición imposible… supongo… La vista previa no se podría conseguir de alguna manera que se mostrara en la caja de texto del propio editor, sin abrir una ventana nueva…??? (Así, en plan switch de html a preview, y viceversa… rollo Tiny ;) )

    Gracias de nuevo por las molestias que os tomais, más con un pesado como yo… :oops:

    Saludos,
    Luis


  25. sisifodichoso dice:

    ¡Nos alegramos de que te funcione! y esperamos que lo disfrutes mucho ;-)

    Sí que tiene vista previa, pero tienes que guardar, no publicar, la entrada antes y entonces te aparece arriba a la derecha un enlace que dice vista previa. El previo se ve debajo del área de edición.
    Para refrescar el previo hay que ir guardando cada vez.

    Y lo del previo en la misma textarea, no sé si es mucho pedir, pero lo vamos a mirar, despacio ;-) , por si fuera posible .. y de pesado nada, sé bienvenido :-)


  26. JORGE dice:

    ya trate por todos los medios de poder editar esta pagiana con este fuentes de codigo y no me funciona no me puedes hechar la mamo que debo de hacer en la otra pagina proces.php utilizo el editor TinyMCE y no puedo

    Editor Online

    tinyMCE.init({
    mode : “textareas”
    });

    tinyMCE.init({
    mode : “textarea”
    });

    This is some content that will be editable with TinyMCE.