De Quicktags a SP-Quicktags

sisi escribió esto a las 18:26

(Actualización: 20-11-2006) SP-Quicktags ha ido creciendo y se ha convertido en etiquetags. Tenéis más información aquí:

De Quicktags a JS_Quicktags 1.2

“Quicktags” es el código Javascript, creado por Alex King, que se utiliza en WordPress como opción por defecto, si no se desea utilizar su editor de entradas WYSIWYG. Básicamente, se trata de una barra de herramientas que te hace la vida más fácil a la hora de editar e insertar código HTML de tus artículos.
Esta es una imagen del editor Quicktags que trae el WordPress por defecto:

Imagen del editor quicktags

Como se ve, trae pestañas para insertar una imagen, un link, o una cita, por ejemplo. Si quisíeramos insertar una imagen, aparece un cuadro de diálogo preguntándonos por la URL, o por el contenido del atributo alt.
Las etiquetas del e ins incorporan el atributo datetime con la fecha y la hora del cambio …
<ins datetime="2006-09-09 T12:33:43+00:00">Una actualización</ins>

En fin que es una herramienta muy cómoda y sencilla y que yo utilizo muchísimo como editor HTML; mi método de trabajo consiste en redactar el texto en gedit y pegarlo en el editor de WordPress para editar con él las etiquetas HTML que me hagan falta … a lo mejor me resultaría más cómodo hacerlo todo con un editor HTML aparte y luego pegar el código … no lo sé, pero bueno, ya me he habituado a hacerlo así … y tiene la ventaja de que te aseguras tener el mismo editor sea cual sea el ordenador que utilices.

El caso es que andaba ya echando en falta alguna funcionalidad extra para mis herramientas de quicktags y este artículo pretende mostrar que poner las herramientas del editor de WordPress a gusto del usuario es muy sencillo y no requiere grandes conocimientos de programación … con fijarse un poquito y tener capacidad de copieteo es suficiente ;-)

Estoy en la obligación de advertiros que todo lo que digo está probado, tanto en mi servidor local como en este blog, pero que, como era de esperar, no me hago responsable de los “daños” ocasionados en vuestros respectivos si os decidís a probar lo que aquí se expone. Se recomiendan pues, pruebas en servidor local y ciertas dosis de sentido común.
Podéis encontrar más información al respecto en estos enlaces (que, he de confesar, he visto después de hacer todos mis enredos :oops: ) :

Hechas las advertencias, vamos a lo que interesa:

Instalar JS_Quicktags 1.2

Lo primero que hice fue mirar la página de su creador Alex King,. Allí, he dado con otra barra de herramientas que no entiendo muy bien porqué no está incluida en WordPress, se trata de JS_Quicktags 1.2 de la que podéis ver una demo: Demo de JS_Quicktags y una imagen de como ha quedado mi editor de entradas después de llevar a cabo la sustitución:

Imagen del editor JS_Quicktags

ya se ve que es mucho más completa ¿no? fijáos que ahora aparecen dos filas de botones y que la de abajo la podemos ocultar a voluntad.

Posibilidad de notas a pie

La estrella de JS_Quicktags 1.2 es la etiqueta footnotes. Sencillamente maravillosa … Inserta una nota a pie en el punto donde tengas el cursor, te pregunta por el texto de la nota a pie y solita te crea una lista de las notas en la parte final del documento. Incluye enlaces a las notas y enlaces desde las notas para volver al texto ¡Esto sí que es un avance! Hay que tener cuidado, porque las notas se numeran en orden de inserción, de hecho, el identificador de cada nota es una medida de tiempo (los milisegundos transcurridos entre el día 1 de enero de 1970) del momento en el que insertamos la nota. Así que hay que tener claro cuántas vamos a poner, antes de hacer nada si no queremos después hacer cambios engorrosos …

De JS_Quicktags a SP-Quicktags

A pesar de la mejora evidente que supone sustituir la barra original de WordPress por esta nueva versión, aún hay etiquetas que no me satisfacen del todo o que no incluyen atributos que yo sí suelo utilizar a menudo. Así que me he permitido hacerle algunos cambios para dejarla más a mi gusto.
Vamos por partes:

Cambio de orden al gusto

En primer lugar, un cambio de orden en los botones, poniendo arriba los que más utilizo. Esto es muy fácil de hacer, puesto que el orden de los botones es el mismo orden que tienen en el código.
Si este es el código para el botón correspondiente a la etiqueta em, por ejemplo:
edButtons.push(
new edButton(
'ed_italic'
,'I'
,'<em>'
,'</em>'
,'i'
)
);

No tenemos más que cortarlo y pegarlo en el lugar de la lista que queremos que aparezca …

Los botones Link y Ext.Link

Originalmente, el botón Link pregunta sólo por la URL del enlace. El botón ext-Link hace lo mismo pero añadiendo el atributo rel=”external”.
Ahora, los botones Link y ext-Link te preguntan por la URL, el idioma del destino del enlace, hreflang, y por el title. El botón ext-Link añade, además, los siguientes parámetros y valores por defecto: rel=”external” rev=”vote-abstain” … son los comienzos de la web semántica en mi blog 1;-)

Para ello se han modificado ligeramente las funciones edInsertLIik y edInsertExtLink respectivamente.
function edInsertLink(myField, i, defaultValue) {
if (!defaultValue) {
defaultValue = 'http://';
}
if (!edCheckOpenTags(i)) {
var URL = prompt('Introduzca la URL' ,defaultValue);
var lang = prompt('Introduzca el código de idioma' ,'hreflang="" ');
var title = prompt('Introduzca un contenido para "title"' ,'title=""');
if (URL) {
edButtons[i].tagStart = '<a href="' + URL + '" ' + lang + title + '>';
edInsertTag(myField, i);
}
}
else {
edInsertTag(myField, i);
}
} // *Added title and hreflang attributes


function edInsertExtLink(myField, i, defaultValue) {
if (!defaultValue) {
defaultValue = 'http://';
}
if (!edCheckOpenTags(i)) {
var URL = prompt('Introduzca la URL' ,defaultValue);
var lang = prompt('Introduzca el código de idioma' ,'hreflang="" ');
var title = prompt('Introduzca un contenido para "title"' ,'title=""');
if (URL) {
edButtons[i].tagStart = '<a href="' + URL + '" ' + lang + title + ' rel="external" rev="vote-abstain">';
edInsertTag(myField, i);
}
}
else {
edInsertTag(myField, i);
}
} //*Added title, hreflang and rev attributes

El botón IMG

Originalmente, el botón IMG pregunta por la URL de la imagen y por el contenido del atributo alt.
Ahora también pregunta por el contenido del atributo title.
Le he añadido también la posibilidad de asignarle una clase de la CSS. Esto me resulta muy útil, ya que muchas de las imágenes que incluyo aquí “flotan” a la derecha o a la izquierda y esto lo tengo definido con las clases “right” y “left” en la CSS.
Nuevamente, esto se traduce en unos pequeños cambios en la función correspondiente, edInsertImage:

function edInsertImage(myField) {
var myValue = prompt('Introduzca la URL de la imagen', 'http://');
if (myValue) {
myValue = '<img src="'
+ myValue
+ '" alt="' + prompt('Introduzca un texto alternativo para la imagen', '')
+ '" title="' + prompt('Introduzca un contenido para "title"', '')
+ '" class="' + prompt('Introduzca la clase CSS de la imagen', '')
+ '" />';
edInsertContent(myField, myValue);
}
} //*Added title and class attributes

Los botones B-QUOTE, q y cite

En JS_Quicktags, sólo existe el botón B-QUOTE para citas en bloque. Le he añadido los botones q, para citas en línea y cite para las menciones de otros autores 2.
Ahora, los tres botones preguntan por el idioma de la cita, lang, o el del nombre que se menciona.
Para B-QUOTE y para q, se añade también el atributo cite (este atributo no está aún soportado para la etiqueta cite, aunque parece ser que lo estará en un futuro).
Para hacer este cambio, además de añadir los botones:
edButtons.push(
new edButton(
'ed_q'
,'q'
,'<q>'
,'</q>'
,'q'
)
); // *Added. Special case 2: quotes
edButtons.push(
new edButton(
'ed_cite'
,'cite'
,'<cite>'
,'</cite>'
,'t'
)
); // *Added. Special case 2: quotes

se ha añadido una función nueva, que es un “refrito” de las que ya estaban creadas en el programa. La llamo edInsertQuote:

function edInsertQuote(myField, i, defaultValue) {
if (!defaultValue) {
defaultValue = 'xml:lang="es"';
}
if (!edCheckOpenTags(i)) {
if (edButtons[i].id == 'ed_cite'){
tag = 'cite ';
var lang = prompt('Introduzca el código de idioma' ,defaultValue); // *cite only with lang
edButtons[i].tagStart = '< ' + tag + lang + '>';
edInsertTag(myField, i);
}
else {
switch (edButtons[i].id){
case 'ed_block':
tag = 'blockquote ';
break;
case 'ed_q':
tag = 'q ';
break;
default:
tag = edButtons[i].id;
}
var lang = prompt('Introduzca el código de idioma' ,defaultValue);
var URL = prompt('Introduzca la URL de origen', 'http://');
edButtons[i].tagStart = '< ' + tag + lang + ' cite="' + URL + '"'+ '>';
edInsertTag(myField, i);
}
}
else {
edInsertTag(myField, i);
}
}

El botón RAE

Bien, el botón RAE es el mismo botón Dict en el original. Gracias a este artículo: http://www.webstudio.cl/blog/diccionario-rae-en-wordpress/, me entero de cómo hacer el cambio para que busque las palabras en el diccionario en línea de la RAE. Cambié el título para que quede más claro.
Hay que modificar la función edSpell

function edSpell(myField) {
var word = '';
if (document.selection) {
myField.focus();
var sel = document.selection.createRange();
if (sel.text.length > 0) {
word = sel.text;
}
}
else if (myField.selectionStart || myField.selectionStart == '0') {
var startPos = myField.selectionStart;
var endPos = myField.selectionEnd;
if (startPos != endPos) {
word = myField.value.substring(startPos, endPos);
}
}
if (word == '') {
word = prompt('Escribe una palabra: ', '');
}
if (word != '') {
window.open('http://buscon.rae.es/draeI/SrvltGUIBusUsual?LEMA=' + escape(word));
}
} // *Modified for RAE (Spanish) dictionary

Los botones del e ins

En la barra original de WordPress sí los traía, aquí no. Imagino que es porque ésta es más genérica y no está concebida específicamente para un blog.
Se copian pues estos botones y sus funciones asociadas de la barra original de WordPress.
edButtons.push(
new edButton(
'ed_del'
,'del'
,'<del datetime="' + datetime + '">' + '<strong>(Corrección: ' + spdate + ')</strong> '
,'</del>'
,'d'
)
); // *Modified. Show date in Spanish format.
edButtons.push(
new edButton(
'ed_ins'
,'ins'
,'<ins datetime="' + datetime + '">' + '<strong>(Actualización: ' + spdate + ')</strong> '
,'</ins>'
,'s'
)
); // *Modified. Show date in Spanish format.

La función que genera la fecha y la hora, que luego se inserta en el atributo datetime:
var now = new Date();
var datetime = now.getUTCFullYear() + '-' +
zeroise(now.getUTCMonth() + 1, 2) + '-' +
zeroise(now.getUTCDate(), 2) + ' T' +
zeroise(now.getUTCHours(), 2) + ':' +
zeroise(now.getUTCMinutes(), 2) + ':' +
zeroise(now.getUTCSeconds() ,2) +
'+00:00';
// *Added. Show date in Spanish format.
var spdate = zeroise(now.getUTCDate(), 2)+ '-' +
zeroise(now.getUTCMonth() + 1, 2) + '-' +
now.getUTCFullYear();

He modificado un poco la presentación de estas etiquetas, haciendo visible esta fecha pero en un formato más legible. Es algo provisional y creo que debo pensar una solución mejor usando CSS:

(Actualización: 09-09-2006) Un ejemplo de actualización

Se mantienen los botones s y u sin mención temporal alguna.

Los botones abbr y acron

He añadido estos dos botones para las abreviaturas y los acrónimos3. En ambos casos, preguntan por el idioma, lang, y por el title o explicación de la abreviatura.

Por último,

(Corrección: 20-11-2006) He traducido los diálogos al español y he empaquetado la nueva barra en un nuevo archivo que llamo SP-Quicktags+.Aquí tenéis enlaces a una demo y a la descarga del nuevo archivo por si os apetece probarlo:

(Actualización: 20-11-2006) SP-Quicktags ha ido creciendo y se ha convertido en etiquetags. Tenéis más información aquí:


Notas:

  1. http://armonia.spiral-static.org/?Web-semantica [back]
  2. http://armonia.spiral-static.org/?2005/01/22/21-carga-semantica-en-xhtml-cite [back]
  3. http://www.sidar.org/funacti/inves/abrvsacr.php [back]
Comparte este artículo:
  • Meneame
  • del.icio.us
  • Digg
  • Facebook
  • TwitThis
  • Google
  • Live
  • E-mail this story to a friend!
  • Print this article!

Artículos relacionados:

Este artículo no admite comentarios