Agustín Villalba Casás
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:
- Extrae el archivo .zip en la carpeta plugins de tu editor TinyMCE
- En la sección de configuración, donde insertas tu editor, añade «improvedcode» a la lista de plugins
- 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.
- 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:
- Descomprimir la última versión del plug-in en el siguiente directorio:
dir_instalacion_Joomla/media/editors/tinymce/jscripts/tiny_mce/plugins/ - Una vez descomprimido, asegúrate de que el directorio del plugin tenga permisos de lectura por parte del servidor web (permisos 755).
- Accede a la parte de administración de tu Joomla y haz de ir a Extensiones -> Gestor de plugins -> Editor – TinyMCE
- En “Opciones básicas” asegúrate de que la Funcionalidad esté en “Extendida”.
- En el bloque “Parámetros extendidos”, en la parte final, en el campo “Plugin personalizado” añade “improvedcode”
- Añade “improvedcode” en el campo “Botón personalizado”
- 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/
Php's Blog 