Actualizar el editor visual de WP, TinyMCE
El editor visual de WordPress tiene muchos fallos y carencias (entre otras cosas, no permite insertar cómodamente objetos como videos de Youtube y similares), y muchos optan por usar servicios externos, como WriteToMyBlog o Performancing. Lo que muchos no saben es que el editor de WP es de por sí una herramienta externa: TinyMCE… ¡que es justo el motor que usa WriteToMyBlog!
El problema está en que, incomprensiblemente, la versión de TinyMCE que se incluye en el pack de WP es extremadamente antigua, así que actualizando el TinyMCE se resuelven muchas de esas pegas que suelen criticarse al editor visual de WordPress. Actualizarlo es extremadamente simple:
Descarga la última versión de TinyMCE desde el área de descargas de su web. Recomiendo que también descargues el compresor PHP, porque acelera bastante la carga del editor (está en la misma zona de descargas). Si quieres, también hay un pack para traducirlo al castellano.
Borra los archivos de la versión que incluye WP. Se encuentran en /wp-includes/js/tinymce
Sube todos los archivos de TinyMCE en la misma ruta. Sube también los de la traducción (si quieres) y los del compresor PHP.
Ahora hay que editar el archivo /wp-admin/admin-header.php
Busca esta línea:
<script type="text/javascript" src="../wp-includes/js/tinymce/tiny_mce_gzip.php?ver=20051211"></script>Sustituye esa línea con este texto:
<script language="javascript" type="text/javascript" src="../wp-includes/js/tinymce/tiny_mce_gzip.php"></script>
<script language="javascript" type="text/javascript">
tinyMCE.init({
mode : "exact",
elements : "content,excerpt",
theme : "advanced",
plugins : "table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,zoom,flash,searchreplace,print,contextmenu",
theme_advanced_buttons1_add_before : "save,separator",
theme_advanced_buttons1_add : "fontselect,fontsizeselect",
theme_advanced_buttons2_add : "separator,insertdate,inserttime,preview,zoom,separator,forecolor,backcolor",
theme_advanced_buttons2_add_before: "cut,copy,paste,separator,search,replace,separator",
theme_advanced_buttons3_add_before : "tablecontrols,separator",
theme_advanced_buttons3_add : "emotions,iespell,flash,advhr,separator,print",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_path_location : "bottom",
plugin_insertdate_dateFormat : "%Y-%m-%d",
plugin_insertdate_timeFormat : "%H:%M:%S",
extended_valid_elements : "a[name|href|target|title|class|id|onclick],img[class|id|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name],hr[class|id|width|size|noshade],font[face|size|color|style],span[class|id|align|style],code[class|lang|style|title],object[width|height],param[name|value],embed[src|type|wmode|width|height]",
external_link_list_url : "example_data/example_link_list.js",
external_image_list_url : "example_data/example_image_list.js",
language : "es",
flash_external_list_url : "example_data/example_flash_list.js" });
</script>En la opción elements, incluye las ID de los textarea en los que quieras usar el editor visual (en el ejemplo se usa para "Contenido" y para el "Extracto opcional", evitando que se active por defecto en los campos personalizados).
El código anterior está pensado para usar el compresor PHP. Si optas por no usarlo, cambia tiny_mce_gzip.php por tiny_mce.js en la primera línea.
Si no quieres traducirlo, elimina la línea language : "es", de esas opciones. En ese caso, obviamente, no subas los archivos del pack de traducción, que subirlo pa na es tontería.
Y listo, sólo tienes que recargar el editor de posts de WP para ver la nueva versión de TinyMCE en funcionamiento. Si no necesitas tantas opciones y botones, hay otras configuraciones posibles (al final de la página), con interfaces más sencillas.
Y todo esto viene a cuento por este post de Manuel Almeida, que me hizo pensar que era mejor solución actualizar el TinyMCE de WP, que usar una herramienta externa tipo WriteToMyBlog, que usa TinyMCE para funcionar… Y ya de paso a ver si le ahorro de hacer más pruebas a Cyberfrancis.
Espero que os sea útil.
EDIT 20-10-2006: Gracias al aviso de guardafaro me he dado cuenta de una grave errata en la cadena a sustituir que hacía totalmente imposible actualizar el editor siguiendo los pasos… jur jur 
. Lamento las molestias, ya está arreglado.
6 Octubre 2006 a las 1:05
Lo malo es que el espacio disponible para WordPress no caben tantas opciones, pero por probar servicios, que no quede
6 Octubre 2006 a las 7:49
Es cosa de la traducción. La versión en inglés cabe perfectamente en una resolución de 1024×768. Supongo que puedes editar os archivos de idioma (es.js) y cambiar “tamaño de letra” por “tamaño” y cosas así para arreglarlo.
Y para insertar vídeos de YouTube, que no lo he contado, puedes o bien pulsar en el botón de “ver código html” y pegar el código “embed”, o bien pulsar el botón de “insertar Flash” y pegar la url del video (es el parámetro del src que viene en el código de “embed”, del tipo http://www.youtube.com/v/codigodelvideo) y asignar el tamaño que quieras al objeto, siendo el habitual 425×350.
8 Octubre 2006 a las 13:27
[...] El enlace como sólo me gusta ponerlo en la primera se pasa como parámetro y mediante un if controlo que sólo se muestre una vez. Tengo pendiente actualizar el editor de Wordpress por otra versión más reciente según puede leerse en el blog de El Bidorto. Lo malo es que lo intente el pasado viernes (haciendo copia de todos los ficheros afectados) y no me acabo de funcionar. [...]
12 Octubre 2006 a las 13:24
pues que va a ser que no me funciona…. no encuentro esa línea de texto para cambiarla…. pero gracias por la idea, especialmente por el flash!!
saludos!!
chao by chaos
12 Octubre 2006 a las 14:14
añadir botones, funciones y plugins al editor visual TinyMCE que viene por defecto con WP 2.0.4…
tal y como os comentaba anoche me estaba tentando actualizar el editor WYSIWYG TinyMCE que viene instalado por defecto en wordpress 2.0.4 a raíz de los problemillas que me había estado dando para insertar videos de youtube en los posts….
para c…
17 Octubre 2006 a las 14:16
vale vale… lo probaremos que la verdad es que echo de menos no insertar los videos d youtuugle directamente
18 Octubre 2006 a las 8:48
He seguido detalladamente todos los pasos indicados para la instalación de la nueva versión del TinyMCE, pero nada. No me funciona. No hay ningún cambio en mi sencillo y obre editor de WP usual. Y precisamente he estado buscando estas nuevas funcionalidades que trae el theme full como aguita de mayo. Pero nada, no me funciona.
18 Octubre 2006 a las 9:18
En las instrucciones dadas se dice:
Ahora hay que editar el archivo /wp-admin/admin-header.php
Busca esta línea:
Sustituye esa línea con este texto: (…)
1.- ¿Pero hasta cual de los múltiples cierres ?
2.- Y resulta que hay dos líneas , una hacia la línea 19 y otra en la línea 36. ¿Cual de las dos es la que hay que sustituir?
Para quienes no dominamos esto del PHP, son “detalles” importantes.
17 Noviembre 2006 a las 13:42
Hola,
he seguido TODAS tus instruciones al dedillo; he descargado los ficheros; los he descomprimido en el lugar adecuado; cambiado las líneas de código; etc., pero… nada de nada, de nada.
Y como son ya dos días casi ininterumpidos que intento arreglar esto del TyniMCE y lo unico que he conseguido al cambiar de la vieja version a la nueva es que si antes podía utilizar algúnos botones curiosos y el editor WYSIWYG, ahora solamente puedo usar el editor HTML integrado con sus catorce pestañas.
SOCORRO!!! Que tengo que hacer?
Un saludo y de todos modos gracias por el post.
Salvador
18 Noviembre 2006 a las 11:38
Hola de nuevo,
lo he probado de mil maneras: actualizando esto y aquello, pero sin exito, y como que mi ingles es un poco malo o malamente poco, no se como pedir ayuda a los unicos que podrìan ayudarme: los creadores.
No se, dejo aquí este grito de SOCORRO otra vez a ver si algun buen amigo da con la solucción de este dilema y la quiere compartir.
Saludos,
Salvador
21 Noviembre 2006 a las 9:51
A ver, Salvador, he retocado el código de nuevo, porque me he dado cuenta de que por un problemilla con el CSS se insertaban unos retornos de carro sin venir a cuento. Todo apunta a que no se te está cargando el javascript de TinyMCE, así que Si con el código corregido no se te arregla el problema, revisa:
1. Que todos los archivos de la nueva versión de TinyMCE se han subido correctamente
2. Que la ruta al archivo
tiny_mce_gzip.phpes correcta3. Prueba a cambiar
tiny_mce_gzip.phpportiny_mce.jsEstá claro que el tutorial no está funcionando bien. Ahora ando mal de tiempo, pero en breve prepararé algo que espero simplifique al máximo las cosas.
15 Enero 2007 a las 20:51
solo una cosa una vez instalado la nueva version pierdes el boton de leer mas el como puedes hacer para volver a instalarlo
16 Enero 2007 a las 15:56
No sé qué botón es ese
5 Febrero 2007 a las 14:28
Pues yo me lo he instalado tal cual las instrucciones, y oye, sin problemas. También es que no lo he probado de manera extensiva, pero vamos, que funciona sin problemas y no me ha dado ningun petardazo…
Muy buen tuto pero al principio yo aclararía que hay que buscar bien las carpetas, que no es descomprimir y punto y seguro que alguno ha subido todo directamente y así no funciona
Muy chulo, si señor. Saludos!
7 Febrero 2007 a las 9:17
Yo acabo de instalarlo y probarlo parece perfecto, salvo por un pqueño detalle y es que en la ventana de edición sólo entran 2 o 3 líneas. Verticalmente es muy pequeña. Imagino que habrá algún parámetro que tocar.
Hasta ahora, lo que solía hacer un truquillo: editar las cosas usando el NVU y cuando estaban copiar y pegar el código html en el editor de wordpress.
Veremos….
PC. si hay alguna pista para el tamaño vertical de la pantalla, se agradecerá.
3 Marzo 2007 a las 8:35
hola! encontre este post de pura suerte y veo que es viejo, asi que… para que version de WP recomiendas hacer la actualizacion?
4 Marzo 2007 a las 10:19
Tale, cambia el número de líneas del editor en Opciones - Escritura
tikitakfire, para cualquiera, porque en las últimas versiones sigue incluyéndose la versión antigua.
7 Julio 2007 a las 20:44
Hola, dices:
“Ahora hay que editar el archivo /wp-admin/admin-header.php
Busca esta línea:”
¿cual linea?
9 Julio 2007 a las 8:38
Si no la ves debe ser problema de tu navegador. Es esta línea (sin las comillas): “<script type=”text/javascript” src=”../wp-includes/js/tinymce/tiny_mce_gzip.php?ver=20051211″></script>”
22 Octubre 2007 a las 7:01
Para que version de WordPress es esto?
23 Julio 2008 a las 22:00
Buenas, como puedo capturar el contenido de TinyMCE espero que me puedan ayudar, por que quiero capturar los datos o el contenido para mostrar en una vista previa , gracias…
14 Septiembre 2008 a las 21:05
[...] El Bidorto v2.1 » Actualizar el editor visual de WP, TinyMCE [...]
15 Septiembre 2008 a las 9:33
hola mira e seguido todos tus pasos y no hay huevos aque funcione el modo visual.la unica diferenciaq con respecto a lo que tu explicas es que en mi archivo de admin-headre.php no aparece la etiqueta sino que aparece estas 2.
esta en la linea 39 y esta * html { overflow-x: hidden; } en la 45.y eso que me e bajado el tinymce de la pagina oficial
Lo mejor de todo esq e cambiado el codigo que tu decias q hay que poner lo e sustituido en el lugar de las 2 etiquetas y de las 2 rutas que habia y no me a funcionado.bueno si sacas donde esta el problema habisa y muchas gracias
21 Septiembre 2008 a las 13:13
en la version que estoy usando de worpress (2.6.2) , no aparece dicha linea en el admin-header.php, ayuda por favor
30 Septiembre 2008 a las 16:09
Bueno, es que esto está pensado para versiones antiguas de WordPress. En las más recientes han actualizado el TinyMCE