13Nov06
etiquetags 1.0
(Actualización: 09-12-2006) Ya está disponible para su descarga la nueva versión de etiquetags: etiquetags1.1
Hará 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.

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









Archivado en: 












Cruzul dice:
Etiquetags, un novo xeito de editar o noso blog.
Se publicamos en XHTML, transitional ou strict, é máis que probable que ata non sexa fácil atopar un editor de escritorio que dispoña de tódalas etiquetas que precisamos. Etiquetags ven da man de Sisifodichoso a aportar unha solución.
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?)
Stahn dice:
Ohh… esto es mejor que cualquier WYSIWYG. Lo voy a difundir en el foro de WordPress a ver si hacen algo util
Gracias por el trabajo.
PD: Ana*, los posts que tienen problemas son pingbacks. O trackbacks, ni se cuales son.
yudoc dice:
Tienen pensado desarrollar alguna versión para poder usarlo en otros CMS? Como Drupal, Mambo, etc.
Buen trabajo
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.
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
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?
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.
sisifodichoso dice:
No sabes cuanto te lo agradezco yo a ti Ana*. No dudes en contarnos cualquier cosa que se te ocurra.
Un abrazo
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.
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
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.
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
JJRC dice:
¿Hay forma de incluirlo en Drupal?
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
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!
sisifodichoso dice:
¡¡Muchas gracias a ti lautaro!!
si se lo agregas a los comentarios, estarÃamos encantados de compartir tu experiencia.
Un saludo
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!!!
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!
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
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/’;
Cruzul dice:
He copiado mal, al final deberÃa decir:
Entonces las rutas las pongo asÃ:
var IconDir = ‘images/’;
var FormDir = ‘forms/’;
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
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.
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…
Saludos,
Luis
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
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.