También he aprovechado para arreglar un bug por el que no se cargaba correctamente la hoja de estilos para la barra de herramientas en todos los casos. Creo que ya está solucionado .

Los nuevos paquetes están disponibles, como en la versión anterior, en español e inglés, y se pueden descargar en la página de descargas de etiquetags.

1.- Compresión de archivos JS

(Actualización: 23-01-2007) Lo que se dice aquí sólo es válido para las ediciones beta. En WordPress 2.1 “Ella” se utilizan, como siempre, los archivos sin comprimir
Ha sido decisión del equipo de desarrollo de WP, la inclusión, como siempre en el directorio wp-includes/js , de dos versiones del mismo script: una comprimida del tipo nombrescript.compressed.js y otra sin comprimir, nombrescript.js.
La razón para comprimir los scripts está clara: se trata de optimizar la carga y optimizar el rendimiento de unos scripts que van siendo cada vez de mayor tamaño y más pesados en su ejecución. Por otro lado, en el blog de Matt Mullenweg se explica que, dado que este proceso de compresión da como resultado un archivo prácticamente ilegible por un humano, se ha decidido mantener las dos versiones, comprimida y sin comprimir, siguiendo el espíritu de una aplicación de código abierto: http://photomatt.net/2005/05/29/javascript-compression/
Puesto que el objetivo no es ocultar el código a nadie y no parece que los algoritmos de cifrado de algunos programas de compresión no estén exentos de problemas, basta, para llevar a cabo la compresión, con quitar los espacios en blanco, saltos de línea, tabulaciones y comentarios.
Existen por ahí bastantes herramientas online que comprimen e incluso “ofuscan” el código javascript.
En el artículo de Matt se nombran algunas y he encontrado una comparativa aquí: http://blogs.pathf.com/agileajax/performance/index.html
De todas las que se nombran, he probado dos de ellas que me parecieron las más sencillas en cuanto al resultado:

1. CSS & JavaScript Compressor
2. ShrinkSafe

El resultado ha sido el siguiente:

Echemos un vistazo al código resultante:

Código original:
// *************** OPTIONS *************//
var IconDir = '/wp-includes/js/iconos/'; //Icons Directory.
var FormDir = '/wp-includes/js/forms/'; //Forms Directory
// *************** END OPTIONS *************//
// ***** CREATING BUTTONS *****//
var edButtons = new Array();
var edLinks = new Array();
var edOpenTags = new Array();
function edButton(id, display, ico, tagStart, tagEnd, access, onClick, title, open) {
this.id = id; // used to name the toolbar button
this.display = display; // label on button
this.ico = ico; // button icon source
this.tagStart = tagStart; // open tag
this.tagEnd = tagEnd; // close tag
this.access = access; // accesskey
this.onClick = onClick; //onclick button
this.title = title; // button title
this.open = open; // set to -1 if tag does not need to be closed
} ...

Código comprimido con creatyvist
var IconDir = '/wp-includes/js/iconos/'; var FormDir = '/wp-includes/js/forms/'; var edButtons = new Array(); var edLinks = new Array(); var edOpenTags = new Array(); function edButton(id, display, ico, tagStart, tagEnd, access, onClick, title, open) { this.id = id; this.display = display; this.ico = ico; this.tagStart = tagStart; this.tagEnd = tagEnd; this.access = access; this.onClick = onClick; this.title = title; this.open = open;}

Código comprimido con shrinksafe
var IconDir="/wp-includes/js/iconos/";
var FormDir="/wp-includes/js/forms/";
var edButtons=new Array();
var edLinks=new Array();
var edOpenTags=new Array();
function edButton(id,_2,_3,_4,_5,_6,_7,_8,_9){
this.id=id;
this.display=_2;
this.ico=_3;
this.tagStart=_4;
this.tagEnd=_5;
this.access=_6;
this.onClick=_7;
this.title=_8;
this.open=_9;
}

Se aprecia que shrinksafe comprime un poco más el código a costa de cambiar nombres de funciones y variables y me da en la nariz (después de utilizar el complicado método de abrir los archivos comprimidos y ver su aspecto) que éste ha sido el programa empleado por el equipo de WordPress para llevar a cabo la compresión. Yo, sin embrago, he elegido el compresor de creatyvist que lo único que hace es quitar saltos y comentarios.
(Corrección: 23-01-2007) Y ahora viene la pregunta del millón: ¿Hace falta comprimir etiquetags para que funcione con wordpress2.1? La respuesta es claramamente no; etiquetags funcionará igual de bien sin más que renombrándolo como quicktags.compressed.js y cambiando la llamada al script en las ventanas de formularios. Es decir abrimos /wp-includes/js/forms/formimg.html y donde pone
ponemos
y lo mismo para formlink.html.
Pero la solución de aportar un paquete nuevo con quicktags.js y quicktags.compressed.js y los formularios ya corregidos, me parece simplemente más estilosa y elegante. Los paquetes estarán listos, espero, antes de que liberen la versión estable de WP 2.1.

2.-Nueva interfaz de administración

Pues me ha hecho ilusión verla: la nueva versión de WP viene con la misma interfaz de administración que ya veníamos disfrutando en los blogs de wordpress.com Me estoy refiriendo a shuttle ; ahora ya no hace falta deshabilitar el editor WYSIWYG para poder disfrutar de etiquetags porque podemos utilizar ambos editores al tiempo para editar nuestros posts.
Cuando vi hace unos meses esta posibilidad en los blogs de worpress.com, la envidié inmediatamente y resultó ser la fuente de inspiración para el mundialmente conocido botón-de-previo-en-el-mismo-textarea de etiquetags1.1.
Me parece simplemente la solución ideal: ¿Por qué renunciar a nada pudiendo tenerlo todo?

Aunque yo, me he decidido por uno de ellos y he optado por deshabilitar el otro

Notas

1. http://www.diarioaborbo.com/2007/01/10/wordpress-21-beta-2/, [volver]

Así, el proceso de instalación de etiquetags en Drupal se reduce a:

1. Descarga el paquete de etiquetags para Drupal.
2. Descomprímelo y copia la carpeta ‘etiquetags’ en el directorio /modules de tu Drupal.
3. Activa el módulo desde tu página de administración.

El módulo etiquetags para Drupal está disponible, de momento, en español e inglés y, como siempre, podéis echar un vistazo en:

• Demo: http://sisifodichoso.org/etiquetags/Es/demo.html.
• Descarga: http://sisifodichoso.org/etiquetags/descarga.html.
• Instalación y FAQ: http://sisifodichoso.org/etiquetags/faq.html.

Ya está disponible para su descarga una nueva versión de etiquetags : etiquetags1.1, que incorpora los siguientes cambios:

1. Corrección del fallo de inserción de imágenes en IExplorer y Opera.
2. Una nueva función de previo en la misma ventana. El botón “vista previa” conmuta entre el modo de edición y el de previsualización.

Y ya, aprovechando, se han modificado los paquetes para WordPress y Dotclear, facilitando así la instalación de etiquetags:

1. Ya no hace falta renombrar el archivo etiquetags.js como quicktags.js o toolbar.js.
2. Ya no hace falta editar las rutas para los iconos y formularios, a no ser que el blog no esté instalado el directorio root de vuestro servidor.

Para echar un vistazo:

• Demo: http://sisifodichoso.org/etiquetags/Es/demo.html.
• Descarga: http://sisifodichoso.org/etiquetags/descarga.html.
• Instalación y FAQ: http://sisifodichoso.org/etiquetags/faq.html.

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

Linux: Ubuntu-Dapper

Sencilla página html con un sencillo formulario con un campo textarea (Corrección: 20-11-2006) que podría ser por ejemplo éste: demo de sp-quicktags3
Abrimos la página en Firefox y Opera.
Escribimos un texto en varias líneas.

primera linea
segunda linea
tercera linea

Lo seleccionamos con el ratón.
Mediante un sencillo script de Javacript mostramos qué caracteres se utilizan, en uno y otro caso, como salto de línea:
alert(escape(sel));
Donde sel es aquí una variable donde se almacena el texto seleccionado.
Ésta es la salida en Firefox:
primera%20linea%0Asegunda%20linea%0Atercera%20linea
Ésta es la salida en Opera:
primera%20linea%0D%0Asegunda%20linea%0D%0Atercera%20linea

Cambiamos ahora de escenario:

Windows XP

Salida de Firefox en Win XP:
primera%20linea%0Asegunda%20linea%0Atercera%20linea
Salida de Opera en WinXP:
primera%20linea%0D%0Asegunda%20linea%0D%0Atercera%20linea
Salida de IE:
primera%20linea%0D%0Asegunda%20linea%0D%0Atercera%20linea

Conclusión que saco yo (después de un rato de búsqueda totalmente infructuosa en Google):

• En Firefox un salto de línea es u000A
• En Opera, un salto de línea es u000Du000A

Independientemente de la plataforma en la que estemos…

• http://sisifodichoso.org/etiquetags/
• http://sisifodichoso.org/2006/11/13/etiquetags-10/

Lo que aquí se cuenta no vale para etiquetags pero sí para JS_Quicktags.

El plugin WP-FLV facilita la tarea de insertar vídeos en flash en nuestros blogs, no sólo simplificando las líneas de código que debemos insertar, sino tambien proporcionandonos un botón en la barra Quicktags que hace la inserción aún más sencilla.
Pues bien, para que este botón aparezca también en nuestra nueva barra de herramientas, JS_Quicktags o SP-Quicktags+, hay que hacer un pequeñísimo cambio de código en el plugin.

Vamos a la función:
function flvAddQuickTag()

Donde pone:
var flvBut = flvToolbar.lastChild;

Hay que poner:
var flvBut = flvToolbar.lastChild.lastChild;

Es lógico, ya que ahora estamos utilizando una barra doble…

• http://sisifodichoso.org/etiquetags/
• http://sisifodichoso.org/2006/11/13/etiquetags-10/

Integración en WordPress

Para integrar JS_Quicktags o SP_Quicktags+ en WordPress no hay más que copiar cualquiera de estos dos archivos en la carpeta /wp-includes/js/ y renombrarlo como quicktags.js. Eso sustituirá la barra original.

Claro que, para que la integración sea más “redonda” podemos darle un colorcillo a las teclas.
Para ello, seguimos el artículo del codex de WordPress:
http://codex.wordpress.org/Coloured_Quicktags
En particular, yo he insertado este código en la hoja de estilo de las páginas de administración wp-admin/wp-admin.css:

#quicktags .ed_button {
background-color: #F0F8FF;
}
#quicktags #ed_strong {
font-weight: bold;
}
#quicktags #ed_link {
color: blue;
text-decoration:underline;
}
#quicktags #ed_ext_link {
color: blue;
text-decoration:underline;
}
#quicktags #ed_del {
text-decoration: line-through;
}
#quicktags #ed_em {
font-style: italic;
}
#quicktags #ed_code {
font-family: "Courier New", Courier, mono;
}

y le da ese tono azulito mucho mejor integrado que el gris original:

Integración en Dotclear

Para integrar JS_Quicktags en Dotclear o en otra página con un cuadro de texto textarea hay que seguir las instrucciones de Alex King que aparecen en la cabecera del archivo
The variable 'edCanvas' must be defined as the <textarea> element you want to be editing in

Es decir, lo que tenemos, tanto en un gestor de contenidos complejo como Dotclear, WordPress o cualquier otro o en una simple demostración como esta, es básicamente la misma cosa: un elemento textarea donde queremos escribir y que tenemos que identificar de alguna manera con la variable edCanvas para que el editor JS_Quicktags pueda insertar etiquetas dentro de ella.

El código de la demostración es :

<form>
<fieldset>
<legend>Ejemplo</legend>
<script type="text/javascript">edToolbar();</script>
<textarea id="canvas" rows="20" cols="100"></textarea>
<script type="text/javascript">var edCanvas = document.getElementById('canvas');</script>
</fieldset>
</form>


Como se puede apreciar, el área de texto “canvas” es asignada a la variable edCanvas.
En el caso de Dotclear, el área de texto y el editor están definidos en el archivo /ecrire/poster.php
Lo que haremos ahora será sustituir el código original


# Toolbar
echo
'<script type="text/javascript" src="js/toolbar.js"></script>'.
'<script type="text/javascript">'.
"if (document.getElementById) {
var tb = new dcToolBar(document.getElementById('p_content'),
document.getElementById('p_format'),'images/');
tb.btStrong('".str_replace("'","\'",__('Strong emphasis'))."');
tb.btEm('".str_replace("'","\'",__('Emphasis'))."');
tb.btIns('".str_replace("'","\'",__('Inserted'))."');
tb.btDel('".str_replace("'","\'",__('Deleted'))."');
tb.btQ('".str_replace("'","\'",__('Inline quote'))."');
tb.btCode('".str_replace("'","\'",__('Code'))."');
tb.addSpace(10);
tb.btBr('".str_replace("'","\'",__('Line break'))."');
tb.addSpace(10);
tb.btBquote('".str_replace("'","\'",__('Blockquote'))."');
tb.btPre('".str_replace("'","\'",__('Preformated text'))."');
tb.btList('".str_replace("'","\'",__('Unordered list'))."','ul');
tb.btList('".str_replace("'","\'",__('Ordered list'))."','ol');
tb.addSpace(10);
tb.btLink('".str_replace("'","\'",__('Link'))."',
'".str_replace("'","\'",__('URL?'))."',
'".str_replace("'","\'",__('Language?'))."',
'".DC_LANG."');
tb.btImgLink('".str_replace("'","\'",__('External image'))."',
'".str_replace("'","\'",__('URL?'))."');
tb.addSpace(10);
tb.btImg('".str_replace("'","\'",__('Internal image'))."','images-popup.php');
tb.draw('".str_replace("'","\'",__('You can use the following shortcuts to refine your layout.'))."');
}
</script>";
# Fin toolbar


Por este otro:


#####   Modificado para utilizar quicktags  #######
# Toolbar
echo
'<script type="text/javascript" src="js/toolbar.js"></script>'.
'<script type="text/javascript">edToolbar();</script>';
echo
'<p>'.form::textArea('p_content',60,$_SESSION['sess_user_edit_size'],
htmlspecialchars($content),6,'class="max"').'</p>';
echo
'<script type="text/javascript">'.
"edCanvas = document.getElementById('p_content');".
'</script>';
##### Fin modificación   ########


Por último, insertamos los mismos estilos que antes en la hoja de estilo de administración: /ecrire/style/default.css

Ésta es una imagen del resultado:

(Corrección: 20-11-2006) He empaquetado todos estos cambios en el paquete dot_sp-quicktags+.zip. No hay que hacer más que descargar el paquete y seguir las sencillas instrucciones del archivo leeme.txt.

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

• http://sisifodichoso.org/etiquetags/
• http://sisifodichoso.org/2006/11/13/etiquetags-10/

• http://sisifodichoso.org/etiquetags/
• http://sisifodichoso.org/2006/11/13/etiquetags-10/

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:

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 ) :

• http://www.tamba2.org.uk/wordpress/quicktags/
• http://www.la100rra.com.mx/qwilm/2006/07/14/56/

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:

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 ¹ …

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 ².
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ónimos³. 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í:

• http://sisifodichoso.org/etiquetags/
• http://sisifodichoso.org/2006/11/13/etiquetags-10/

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]