SP-Quicktags+ en WordPress y en Dotclear

sisi escribió esto a las 11:39

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

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:

SP_Quicktags con las teclas en azul

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:

SP-Quicktags en Dotclear

(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í:

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:

5 comentarios en “SP-Quicktags+ en WordPress y en Dotclear”


  1. Cruzul dice:

    Mi enhorabuena: ¡excelente trabajo!

    Independientemente de que se utilice un editor en “tierra”, el tener en línea un editor de estas características (SP) es un lujo para cualquier autor.

    As miñas felicitacións dende a reserva noroccidental ,-)


  2. sisifodichoso dice:

    ¡¡Mil gracias!! :D

    saluditos desde Donostia … como molan las pensiones con internet … ;)


  3. Ana* dice:

    ¡Pero qué guay que eres! Nada más entrar me encuentro con esa chulísima ruta que me ha encantado y que te pienso copiar. Jo, qué rabia no venir con más tiempo para empaparme bien de lo que has escrito. Te voy a tener que dejar para los fines de semana. Donostia. Qué bien te lo montas, ¿no? ;-)


  4. sisifodichoso dice:

    Hey Ana* :-) :-)
    encantada de leerte de nuevo …
    Bueno, han sido sólo un par de días pero estaba todo precioso …
    Molan las rutas en google ¿verdad? :-)


  5. Ana* dice:

    Jo que si molan. Lo dicho, tengo que venirme con tiempo a pegarle un buen repaso a este pozo de sabiduría que es este tu blog.