Editor avanzado en los comentarios

Muchos sabran lo que es un editor WYSIWYG, ¿No? Bueno, para los que no lo saben, existe la Wikipedia.
WordPress, en el momento de redactar una entradas, usa un editor WYSIWYG llamado TinyMCE que tiene mucho exito ya que es muy simple de implementar en cualquier web y muy liviano (No tilda el navegador como el FCKEditor). Lo malo de WordPress es que solo lo usa redactando las entradas. Por eso, en este tutorial veremos como insertar dicho editor en el momento de redactar un comentario. Ideal para que los novatos que comentan en muchos blogs.
Entonces, para insertar este editor lo podemos hacer de dos formas. La primera forma (y la mas simple) es usando el plugin llamado TinyMCEComments, pero tiene desventajas:
- No valida en la W3C.
- Es un plugin mas, por lo tanto, hace al blog mas lento y pesado.
Por eso recomiendo usar la segunda forma, pero lo malo de esta es que tenemos que editar algunos archivos PHP del theme. Siguiendo con el tema, en la carpeta del theme que estemos usando encontraras un archivo llamado comments.php.
Lo abres y buscas lo siguiente: <textarea. Cuando lo encuentres, fijese que clase tiene, eemmm, veamos un ejemplo:
<textarea name=”comment” id=”comment” cols=”10″ rows=”10″ class=”comment_form_textarea”></textarea>
En lo citado arriba, la clase seria comment_form_textarea. Recordemos esta palabra que luego la necesitaremos. Nota: Si no dice nada referido a la clase, lo agregas.
Guardas y cierras el archivo. Posteriormente editas el archivo header.php que se encuentra en la misma carpeta y, entre las lineas <head> y </head> agregas lo siguiente:
<script type=”text/javascript” src=”<?php echo get_option(’home’); ?>/wp-includes/js/tinymce/tiny_mce.js”></script>
<script type=”text/javascript”>
tinyMCE.init({
mode : “textareas”,
editor_selector : “CLASE_DEL_TEXTAREA“,
theme : “advanced”,
theme_advanced_buttons1 : “bold,italic,underline,strikethrough,separator,undo,redo,separator,link,unlink,image,code”,
theme_advanced_buttons2 : “”,
theme_advanced_buttons3 : “”,
theme_advanced_toolbar_location : “top”,
theme_advanced_toolbar_align : “left”,
theme_advanced_statusbar_location : “bottom”,
extended_valid_elements : “a[name|href|target|title|onclick],img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|
onmouseout|name],hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]”
});
</script>
Reemplazas CLASE_DEL_TEXTAREA por la clase que encontraste en el archivo comments.php y guarde los cambios. Luego vayan a comentar una noticia. Y, si esta todo correcto, tendria que aparecer el editor TinyMCE en el campo de los comentarios.
Y como extra, en la pagina oficial pueden ver ejemplos para editar la barra de herramientas.
Archivado bajo: Tutoriales, WordPress | 6 comentarios »