Archivos de la categoría ‘plug-in’


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

You can read the English version of this post in http://phpsblog.agustinvillalba.com/scrollto-jquery-plug-in-css/

Hoy vamos a hablar un poco del plug-in para jQuery scrollTo y su dependencia “oculta” con la carga de nuestros archivos CSS.

scrollTo de jQuery

El plug-in scrollTo de jQuery (desarrollado por Ariel Flesler) nos permite que nuestra página web realice un scroll (desplazamiento de la barra vertical) hasta cualquier elemento de nuestro documento web que necesitemos, de esta forma podemos centrar la atención del usuario en dicho elemento cada vez que se recarga la página (por ejemplo, una entrada del menú de la izquierda en nuestra web), evitándole al usuario tener que hacerlo él manualmente. En la web del proyecto del plug-in podrás encontrar toda (o casi toda) la documentación necesaria para integrarlo en tu proyecto web. De más está decir que para poder utilizarlo has de incluir también en tu proyecto el propio framework JavaScript jQuery. A este plug-in que tan útil me ha sido sólo le encontré un pequeño fallo de documentación…
(más…)