ImprovedCode, nuevo plug-in para TinyMCE

Publicado: 19/04/2013 en desarrollo, JavaScript, plug-in, TinyMCE
Etiquetas:, , ,

You can read the English version of this post in http://phpsblog.agustinvillalba.com/improvedcode-new-plug-tinymce/

En mi trabajo se utiliza mucho el editor web TinyMCE (http://www.tinymce.com), y me pidieron, si fuera posible, que el editor de código fuente HTML mostrara el código correctamente indentado y con los tags remarcados en distintos colores. Me puse a buscar plug-ins en la red para este editor que hicieran justamente lo que me pedían, pero no encontré ninguno que se ajustara exactamente a nuestras necesidades, por lo que me dispuse a hacerlo yo mismo basándome en el ya existente en el propio editor y utilizando la librería CodeMirror (http://codemirror.net) para el remarcado del código fuente. Así nació mi plug-in ImprovedCode para TinyMCE.

Descarga

Puedes descargarte el plug-in en su repositiorio de GitHub:

https://github.com/aguvillalba/improvedcode

Su licencia es LGPL v3 (http://www.gnu.org/copyleft/lesser.html) por lo que eres totalmente libre de modificar su código o incluir el plug-in en cualquier editor TinyMCE.

Instalación

Para instalar el plug-in ImprovedCode en tu editor TinyMCE, simplemente tienes que seguir estos 3 sencillos pasos:

  1. Extrae el archivo .zip en la carpeta plugins de tu editor TinyMCE
  2. En la sección de configuración, donde insertas tu editor, añade “improvedcode” a la lista de plugins
  3. Añade “improvedcode” en la barra de herramientas donde desees que se visualice el botón que lanza el plug-in. Habitualmente llamada “theme_advanced_buttonsN”, donde “N” es el número de la barra de herramientas en cuestión.
  4. Haz de asegurarte que el theme de tu editor TinyMCE está en modo “advanced”. Lo puedes comprobar en la opción de configuración de tu editor, en el mismo código dónde lo insertas en tu HTML:
tinyMCE.init({ 
        // General options 
        mode : "specific_textareas", 
        editor_selector: "mceEditor", 
        theme : "advanced", 
        plugins : "..., improvedcode, ...",
        theme_advanced_buttons1 : "..., improvedcode, ..."
});

Configuración

El plug-in dispone de varias opciones de configuración, permitiendo así que se ajuste mejor a tus necesidades. Como su propio nombre indica, estas son opciones de configuración, por lo que no es obligatorio establecer ninguna de ellas para el correcto funcionamiento del plug-in. Estas opciones son:

  • height: <int>, Valor entero que establece la altura inicial que ha de tener el editor. Por defecto: 580 (px).
  • indentUnit: <int>, Valor entero que establece el número de tabulaciones que ha de haber entre un bloque padre y un bloque hijo. Por defecto: 1
  • tabSize: <int>, Valor entero que determina cuántos espacios componen una tabulación. Por defecto: 4.
  • lineWrapping: <bool>, Valor booleano (true o false) que determina si ha de ajustarse las lineas al editor. Por defecto: true.
  • lineNumbers: <bool>, Valor booleano (true o false) que determina si han de mostrarse los números de línea en el margen izquierdo. Por defecto: true.
  • autoIndent: <bool>, Valor booleano (true o false) que determina si han de indentarse las líneas del editor cuando éste se inicia. Por defecto: true.
  • optionsBar: <bool>, Valor booleano (true o false) que determina si ha de mostrarse la barra de casillas de opciones en la parte superior del editor. Por defecto: true.
  • theme: <string>, Nombre de el tema estético que ha de aplicarse al editor. Por defecto: default. Esta es la lista de los posibles themes a aplicar:
    • ambiance
    • ambiance-mobile
    • blackboard
    • cobalt
    • eclipse
    • elegant
    • erlang-dark
    • lesser-dark
    • monokai
    • neat
    • night
    • rubyblue
    • solarized
    • twilight
    • vibrant-link
    • xq-dark
    • xq-light

Más información

Para más información puedes consultar el archivo “README” incluido en el propio plug-in.

Colaboración

Si encuentras algún error en el funcionamiento o código fuente del plug-in, o si tienes alguna idea o necesidad para añadirle más funcionalidades al plug-in, por favor, no dudes en ponerte en contacto conmigo en mi formulario de contacto

Cómo incluirlo en Joomla

Para añadir el plug-in en Joomla tan sólo tienes que seguir estos pasos:

  1. Descomprimir la última versión del plug-in en el siguiente directorio:
    dir_instalacion_Joomla/media/editors/tinymce/jscripts/tiny_mce/plugins/
  2. Una vez descomprimido, asegúrate de que el directorio del plugin tenga permisos de lectura por parte del servidor web (permisos 755).
  3. Accede a la parte de administración de tu Joomla y haz de ir a Extensiones -> Gestor de plugins -> Editor – TinyMCE
  4. En “Opciones básicas” asegúrate de que la Funcionalidad esté en “Extendida”.
  5. En el bloque “Parámetros extendidos”, en la parte final, en el campo “Plugin personalizado” añade “improvedcode”
  6. Añade “improvedcode” en el campo “Botón personalizado”
  7. Guarda los cambios

Con estos pasos ya deberías tener disponible el botón “HTML+” que lanza el editor HTML de ImprovedCode.

You can read the English version of this post in http://phpsblog.agustinvillalba.com/improvedcode-new-plug-tinymce/

Anuncios
comentarios
  1. Sergio dice:

    Buenas a todos.

    Pareciéndome , como me parece, una formidable contribución, he tratado de probarlo en una web que estoy desarrollando con Prestashop 1.5.4 y, no consigo que me cargue este plugin.
    He seguido las indicaciones al pie de la letra pero, no sé por qué, al agregar “improvedcode” a los plugins, en el archivo tinymce.inc.js desaparecen las barras del editor.

    Gracias de nuevo y seguiré probando a ver si doy con la tecla.

    • Hola Sergio,

      Si nos permites ver el código donde insertas el plug-in quizás te podamos ayudar. Ten en cuenta que el nombre de la barra de herramientas donde haz de insertarlo sería algo como “theme_advanced_buttonsX”, donde “X” sería el número de la barra (1, 2, 3, etc). Y haz de tener el theme del editor en modo “advanced”.

      Saludos

    • Hola Sergio,

      Quizás tu sistema está en español, por lo que TinyMCE está buscando la traducción a español del plug-in. Acabo de actualizarlo para añadirla. Si quieres descárgate la última versión del plug-in y pruébalo nuevamente.

      Ya nos cuentas qué tal te fue y muchas gracias por el feedback!

      Un saludo.

  2. Marco Polo dice:

    Muy bien, buena publicación.

  3. Ata dice:

    Gran trabajo Agustín!! Enhorabuena!!!

    Una pregunta…

    Sería posible utilizar este pluggin en CMSs en los que esté instalado por defecto el TinyMCE, como por ejemplo Joomla??

    Muchas gracias

    • Por supuesto!

      Tan sólo tendrías que añadirlo en el directorio “plugins” del propio TinyMCE donde Joomla lo haya instalado y localizar el código donde Joomla inserta el propio editor. En ese código sólo haz de añadir “improvedcode” en la lista de plugins e improvedcode en la variable “theme_advanced_buttons_n”. Por supuesto, el editor TinyMCE ha de tener el theme en modo “advanced”. Algo parecido a este código:

      tinyMCE.init({
      // General options
      mode : "specific_textareas",
      editor_selector: "mceEditor",
      theme : "advanced",
      plugins : "improvedcode",
      theme_advanced_buttons1 : "improvedcode"
      });

      O quizás Joomla tiene una forma más sencilla de añadir plugins a su editor que desconozco dado que no controlo tanto como quisiera Joomla. Pero en resumen, el plugin lo puedes utilizar en cualquier editor TinyMCE que encuentres.

      Un saludo!

    • Hola Atamán,

      Para añadir el plug-in en Joomla tan sólo tienes que seguir estos pasos:

      1. Descomprimir la última versión del plug-in en el siguiente directorio:
      /media/editors/tinymce/jscripts/tiny_mce/plugins/
      2. Una vez descomprimido, asegúrate de que el directorio del plugin tenga permisos de lectura por parte del servidor web (permisos 755).
      3. Accede a la parte de administración de tu Joomla y haz de ir a Extensiones -> Gestor de plugins -> Editor – TinyMCE
      4. En “Opciones básicas” asegúrate de que la Funcionalidad esté en “Extendida”.
      5. En el bloque “Parámetros extendidos”, en la parte final, en el campo “Plugin personalizado” añade “improvedcode”
      6. Añade “improvedcode” en el campo “Botón personalizado”
      7. Guarda los cambios

      Con estos pasos ya deberías tener disponible el botón “HTML+” que lanza el editor HTML de ImprovedCode.

      Un saludo!

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s