Chen Press 3.1

Hablaba el mes pasado sobre los editores que había para WordPress, entre ellos el ChenPress, que no deja de ser un FCKeditor, embebido en WordPress, como editor en este blog.

Le faltaban dos botones, el de more, que genera <!–more–> y es la etiqueta encargada de partir nuestro artículo en portada y decir “Seguir leyendo este artículo” y “next page”. Tras mucho buscar, y mirar código, no he sido capaz de entender cómo meter más botones, y veo que mucha gente lo demandaba.

Al final encontré este código usando Google Code Search, y os explico cómo lo he conseguido.

Te bajas el Chenpress 3.1.1 y lo instalas.

/FCKEditor/fckconfig.js

En este archivo miramos dónde añade los plugins el ChenPress, y metemos este código, le decimos que queremos añadir estos plugins. Plugin le llama a botones con funcionalidades extras.

FCKConfig.Plugins.Add( ‘more’) ;
FCKConfig.Plugins.Add( ‘nextpage’) ;

Y luego, está la toolbar, o barra de herramientas que es la barra que vemos.
FCKConfig.ToolbarSets[“WordPressTool”] = [
[‘Source’,’-‘,’NewPage’,’Templates’,’Preview’,’Print’],
[‘Cut’,’Copy’,’Paste’,’PasteText’,’PasteWord’],
[‘Undo’,’Redo’,’-‘,’Find’,’Replace’,’SpellCheck’],
[‘Form’,’Checkbox’,’Radio’,’TextField’,’Textarea’,’Select’,’Button’,’ImageButton’,’HiddenField’],
[‘Link’,’Unlink’,’Anchor’],
[‘Image’,’Flash’,’Table’,’Rule’,’Smiley’,’SpecialChar’,’PageBreak’,’UniversalKey’],
[‘OrderedList’,’UnorderedList’,’Outdent’,’Indent’,’JustifyLeft’,’JustifyCenter’,’JustifyRight’,’JustifyFull’],
[‘Bold’,’Italic’,’Underline’,’StrikeThrough’,’Subscript’,’Superscript’,’RemoveFormat’],
‘/’,
[‘Style’,’FontFormat’,’FontName’,’FontSize’],
[‘TextColor’,’BGColor’],
[‘About’]
] ;

Pues añadimos tras ‘RemoveFormat’]:

[‘more’,’nextpage’],

Lo que significa el botón de more, y nextpage en un bloque conjunto que queda delimitado por los corchetes: [] quedando:

FCKConfig.ToolbarSets[“WordPressTool”] = [
[‘Source’,’-‘,’NewPage’,’Templates’,’Preview’,’Print’],
[‘Cut’,’Copy’,’Paste’,’PasteText’,’PasteWord’],
[‘Undo’,’Redo’,’-‘,’Find’,’Replace’,’SpellCheck’],
[‘Form’,’Checkbox’,’Radio’,’TextField’,’Textarea’,’Select’,’Button’,’ImageButton’,’HiddenField’],
[‘Link’,’Unlink’,’Anchor’],
[‘Image’,’Flash’,’Table’,’Rule’,’Smiley’,’SpecialChar’,’PageBreak’,’UniversalKey’],
[‘OrderedList’,’UnorderedList’,’Outdent’,’Indent’,’JustifyLeft’,’JustifyCenter’,’JustifyRight’,’JustifyFull’],
[‘Bold’,’Italic’,’Underline’,’StrikeThrough’,’Subscript’,’Superscript’,’RemoveFormat’],
[‘more’,’nextpage’],
‘/’,
[‘Style’,’FontFormat’,’FontName’,’FontSize’],
[‘TextColor’,’BGColor’],
[‘About’]
] ;

/FCKEditor/editor/plugins/

Y ahora ya hemos definido lo que queremos, pero claro no hemos creado el código todavía.

Creamos en el directorio /FCKEditor/editor/plugins/ los directorios more y nextpage.

Directorio /more/

Crear archivo fckplugin.js:

//Begin Code
var FCKmore = function(name)
{
this.Name = name;
}

FCKmore.prototype.Execute = function()
{
FCK.InsertHtml(“<!–more–>”)
}

// manage the plugins’ button behavior
FCKmore.prototype.GetState = function()
{
return FCK_TRISTATE_OFF;
}

FCKCommands.RegisterCommand( ‘more’, new FCKmore(‘more’)) ;

// Create the toolbar button.
var omoreItem = new FCKToolbarButton( ‘more’, “Insert the more tag”, null, null, false, true ) ;
omoreItem.IconPath = FCKConfig.PluginsPath + ‘more/more.gif’ ;
FCKToolbarItems.RegisterItem( ‘more’, omoreItem ) ;

Añadir imagen more.gif que aquí os muestro, guardarla y subirla al mismo directorio:

Directorio /nextpage/:

Crear fckplugin.js, e insertar este código:

//Begin Code
var FCKnextpage = function(name)
{
this.Name = name;
}

FCKnextpage.prototype.Execute = function()
{
FCK.InsertHtml(“<!–nextpage–>”)
}

// manage the plugins’ button behavior
FCKnextpage.prototype.GetState = function()
{
return FCK_TRISTATE_OFF;
}

FCKCommands.RegisterCommand( ‘nextpage’, new FCKnextpage(‘nextpage’)) ;

// Create the toolbar button.
var onextpageItem = new FCKToolbarButton( ‘nextpage’, “Insert the nextpage tag”, null, null, false, true ) ;
onextpageItem.IconPath = FCKConfig.PluginsPath + ‘nextpage/nextpage.gif’ ;
FCKToolbarItems.RegisterItem( ‘nextpage’, onextpageItem ) ;

Y voilá, debería funcionar.

Chenpress y editores wordpress.

Código que me ha permitido instalar estos botones. Gracias a Felipe Coelho

Technorati Tags: , ,

14 pensamientos en “Chen Press 3.1

  1. Trifonov

    Joer, cuando te pones a meter códigos y tal no hay quien lo siga. Espero a ese curso de wordpress como agua de mayo. porque esto me parece super interesante, igual que lo de los sitemap que me meto y me lío un poco.
    Zorionak y sigue así.

  2. Slaff

    La verdad que entre todos los editores de texto, cuyos respetan bien codigo semantico y valido segun estandartes, yo pude encontrar uno solo (sin dependencia de plataforma) para publicar en blog. Es el que viene integrado en navegador Flock.

    Pero personalmente prefiero escuela vieja – puro html y usabilidad. Será que soy el uníco oldschool html blogger?

  3. Hostinet

    Jejejejejeje bien aconsejados por el amigo galder, nosotros hemos decidido dar la oportunidad a los clientes de descargar el wordpress e instalarlo directamente desde su panel de control del Host y como no cuando alguno queire saber algo mas le remitimos a galtxor que es todo un experto en la materia 🙂

    Muy buen trabajo Galder 😉

  4. javier

    Este tipo de plugins son útiles si pones muchas fotos en los post y quieres poner textos a los lados. últimamente no pongo casi fotos entre otras cosas porque las hospedo en flickr y me da pereza loguearme con mi cuenta yahoo.

  5. Henry

    Hi,

    can you please make an ready for install File?
    (With introduction please)

    I am not understand this.

    Greets
    Henry

  6. cainSan

    Muchas gracias por ocmpartir este código. Lo puesto en funcionamiento tras cambiar las comillas de algunas partes del texto que me copiaba con formato. a parte de esto el plugin es completamente operativo y se agradece el poder gestionar de verdad los archivos creando y borrando carpetas y archivos.

    Pero, siempre hay un pero. Sería perfecto si cada vez que pulsásemos en el icono de “Insert more tag” nos apareciese un gráfico en el campo de texto con la palabra “more” para marcarnos el “hasta aquí” en el texto, tal y como lo hace el editor por defecto del WP.

    ¿Sería mucho pedir que lo investigues? Soy un simple diseñador que simplemente tiene una relación de respeto mútuo con el PHP (._.)

    ¡Gracias!

  7. Pingback: Mis plugins de Wordpress en el 2.1 · Galder.net web –> blog

  8. Pingback: Modificar el tamaño de las miniaturas o thumbnails · galder.net

  9. BuscaV

    A ver…

    Yo quiero introducir un DropDownList a una barra de herramientas y poder cargarla desde codigo. ¿Una paranoia verdad?, si alguien me alluda

  10. aca463

    Buenos días, he probado el código con la versión 3.1.1 y no me funciona. Me dá un error en el archivo:
    FCKeditoreditorjsfck_startup.js

    No sé si a alguien le ha pasado lo mismo y lo ha solucionado.
    Saludos!

  11. Pingback: La importancia de las imágenes para Google » galder.net

  12. Pingback: Editores de Wordpress » galder.net

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *