No existe ninguna imagen

Posts Tagged ‘tinyMCE’

Como crear un botón costumizado para TinyMCE

Jueves, junio 30th, 2011
Este artículo es parte de una serie la cual trata temas sacados de las “palabras claves” (keywords) usadas por personas que llegan a mi website mediante motores de búsqueda (google, bing, etc). He decidido hacer esto ya que veo que muchas personas  llegan al blog buscando algunos temas los cuales todavía no he tratado.

Crear un botón costumizado para TinyMCE para hacer cosas simples, como agregar elementos o HTML al editor, es bastante sencillo.  Se necesitan 4 cosas:

  1. La imagen del botón. Esta debe ser una imagen 20px por 20px. Si es de otro tamaño el editor alterará el alto y el ancho de la imagen para que se de ese tamaño.
  2. El código HTML o elemento que quieres que se inserte en el editor.
  3. El código javascript. Este se debe añadir al objeto de configuración del tinyMCE.init().
  4. Agregar el nuevo botón a la lista de botones.

Imagen

Como he mencionado antes la imagen debe ser 20px por 20px. Si la imagen es un gif o un png con transparencia se podrá apreciar el efecto “hover”, osea, el cambio que ocurre cuando se pone el pointer del mouse encima del botón. En este caso he usado esta  imagen sacada de IconFinder.  La imagen es originalmente 16px por 16px. Yo la he llevado al tamaño adecuado:

Código html que se va a insertar

Para este ejemplo yo usaré la frase “Hola Mundo!“, pero pueden sustituir este código por lo que quieran:

Hola Mundo!

Código javascript que creará la funcionalidad

La última parte, pero a la vez la más importante, es el código el cual debe insertarse en el objeto de la configuración de tu tinyMCE.init(). Este es el código:

setup : function(editor) {
	// Boton 1
	editor.addButton('mi_boton', {
		//nombre del boton
		title : 'Mi boton',
		//imagen del boton (20 x 20 px)
		image : 'mi_imagen.png',
		//funcion a ejecutarse cuando se le de clic al boton.
		onclick : function() {
			editor.focus();
			editor.selection.setContent('Contenido a insertar');
		}
	});
}

A continuación hago un desglose del código:

setup

El método “setup” añade eventos al editor. Como parámetro pasamos el objeto del editor:

setup : function(editor) {
	editor.evento(parametro)
}

addButton

Es un método del objeto del editor el cual añade el botón a la barra de botones.

ed.addButton('example', {
	title : 'example.desc',
	image : '../jscripts/tiny_mce/plugins/example/img/example.gif',
	onclick : function() {
	ed.windowManager.alert('Hello world!! Selection: ' + ed.selection.getContent({format : 'text'}));
}

Este método acepta dos parámetros:

  1. el nombre del botón
  2. un objeto con las opciones del botón.

Las opciones del objeto son las siguientes:

  • title: titulo del botón
  • image: ruta de la imagen que se va a utilizar para el botón
  • onclick: función  con el evento click del botón

En el caso de mi ejemplo este es el resultado:

setup : function(editor) {
	// Boton 1
	editor.addButton('mi_boton', {
		//nombre del boton
		title : 'Hola Mundo',
		//imagen del boton (20 x 20 px)
		image : 'page_add.png',
		//funcion a ejecutarse cuando se le de clic al boton.
		onclick : function() {
			editor.focus();
			editor.selection.setContent('Hola Mundo!');
		}
	});
}

Puedes ver mi tinyMCE.init aquí

Añadir botón a la lista de botones

Una vez incluido el código al tinyMCE.init se agrega a la lista de botones, sea, a una de las propiedades:

  • theme_advanced_buttons1
  • theme_advanced_buttons2
  • theme_advanced_buttons3

ejemplo:

theme_advanced_buttons2 : "mi_boton, styleselect, formatselect,fontselect,fontsizeselect,separator,image,media,vfilebrowser,preview",

jTinyAjax: Plugin de jQuery para convertir a TinyMCE en un editor AJAX

Martes, mayo 17th, 2011

jTinyAjax

jTinyAjax es un plugin de jQuery el cual permite utilizar el editor TinyMCE como un editor AJAX, ideal para hacer cualquier tipo de contenido editable . Aunque TinyMCE ya posee un muy buen API para hacer llamadas AJAX yo he tratado de simplificar el proceso lo más posible usando jQuery y agregar algo de funcionalidad extra. El plugin pesa 5kb minificado, sin contar TinyMCE, y puede ser integrado con jQuery UI y BlockUI para efectos adicionales.

Versión actual

jTinyAjax 1.3

Pruebas hechas en:

IE 7 en adelante, Firefox 3 en adelante, Chrome 10 en adelante, Opera 11 en adelante y Safari 4 en adelante.

Dependencias

  • El plugin depende de jQuery versión 1.4.2 o mayor debido al uso de funciones como delegate().
  • También depende del paquete normal de TinyMCE versión 3 o superior. Favor de no usar la versión de jQuery.

Opcional

  • jQuery UI
  • BlockUI

Uso

Primero, debemos incluir los archivos necesarios:

<!-- css jTinyMCE -->
<link href="css/jtinyajax.css" rel="stylesheet" type="text/css" />
<!-- Scripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" type="text/javascript"></script>
<script src="js/tiny_mce/tiny_mce.js" type="text/javascript"></script>
<script src="js/jTinyAjax.jquery.min.js" type="text/javascript"></script>

Si se van a usar jQuery UI y/o BlockUI se incluyen también:

<!-- css jquery UI -->
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css" type="text/css" />
<!-- Scripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js" type="text/javascript"></script>
<script src="js/jquery.blockUI/jquery.blockUI.min.js" type="text/javascript"></script>

La forma más básica de usar jTinyAjax es pasando el URL de la página encargada de interactuar con el servidor, de esta forma:

//con opciones defecto
$('.jtinymceajax').jTinyAjax({
     url: "pagina.php"
});

Opciones

  • url: defecto – Empty String
    • URL donde se enviará el contenido. La misma se encargará de las operaciones del lado del servidor
  • typeRequest: defecto - “post”
    • Tipo de request AJAX , “post” o “get”
  • tinymceinit: defecto - Objeto de opciones de TinyMCE
  • extraParam: defecto - Empty String
    • Parametros extras para enviar en la consulta AJAX el formato url string:
      variable1=valor1&variable2=valor2
  • buttonTextEdit: defecto - “save”
    • Texto del boton de enviar el contenido
  • buttonTextCancel: defecto - “cancel”
    • Texto del boton de cancelar el contenido
  • UIfy: defecto - false
    • Opcion para convertir botones en botones de jQuery UI
  • blockUI: false
    • Opcion para usar blockUI. Valores: true, false
  • blockOptions: defecto - Objeto de opciones de blockUI
    • Opciones de blockUI que se utilizarán si la opción blockUI tiene el valor de true. Para más opciones pueden visitar la página oficial del plugin.
  • ajaxTypeData: defecto - “html”
    • Tipo de data a recibirse. HTML para el comportamiento defecto. Esto equivale al opci&oacute;n dataType de la funci&oacute;n ajax() de jQuery. Si se usa json se espera un campo llamado “editor” el cual debe poseer la informaci&oacute;n que se quiere colocar en el editor web. El json puede contener cualquier campo adicional, ejemplo:
      {"editor":"esto se pone en el editor","mensaje":"este es un mensaje adicional"}
      

      El json será “parseado” antes de pasarse a los eventos usando el método “$.parseJSON()” de jQuery.

Eventos

  • onClick: function
    • Callback que se ejecuta cuando se le da click al elemetno para editarlo
  • onCancel: function
    • Callback que se ejecuta cuando se le da click al boton de cancelar
  • onSend: function
    • Callback que se ejecuta cuando se le da click al boton de enviar
  • onError: function
    • Callback que se ejecuta cuando hay un error en la consulta
  • onSuccess: function
    • Callback que se ejecuta cuando termine de realizarse la consulta

Demo

Descarcar

  • Descarga el plugin en GitHub

jFileBrowser para TinyMCE . Sube y maneja archivos usando TinyMCE, PHP y MySQL

Viernes, marzo 5th, 2010

jFileBrowser_thumb

Desde hace tiempo tenía el deseo de compartir este plugin. Viene al caso decir que yo uso TinyMCE como editor web del C.M.S. costumizado que ofrezco a mis clientes. El editor es excelente, pero tiene un gran problema: El plugin para subir/editar archivos  no es gratis. Tanto MCImageManager como MCFileManager son soluciones de pago. Después de múltiples fracasos tratando de implementar soluciones gratis decidí tratar de hacer un plugin yo mismo. También me gustaba la idea de almacenar las rutas de las imágenes y otro tipo de información en una base de datos. De esta manera podría fácilmente agregar un buscador, o mayor organización a los archivos, algo que cuesta un poco más de trabajo (por lo menos para mí) al trabajar directamente con archivos del ftp.

Yo no estoy acostumbrado a trabajar con javascript pero, afortunadamente, TinyMCE posee excelente documentación sobre como crear un plugin. Debido a mi limitado conocimiento de javascript no pude hacer algunas cosas como usar ajax al mostrar contenido, pero aún así quedé bastante contento con el resultado.

Debo agradecer a okram por crear las librerías PHPPaging y PHPImagen, las cuales no sólo he usado en este pluging, sino también en muchos de mis proyectos.  Gracias también a Mark James por sus exelentes íconos.

Características del plugin:

  • Creación de directorios virtuales
  • Subir varios tipos de archivos
    • Imágenes (jpg, gif y png)
    • Documentos PDF
    • Documentos Word
    • Documentos Excel
    • Documentos PowerPoint
    • Documentos .txt
  • Creación automática de thumbnails para la organización (PHPImagen)
  • Uso de paginación de los directorios y archivos (PHPPaging)
  • Vistas de thumbnails y listado de los archivos
  • Búsqueda por nombre de archivo

Requerimientos:

  • PHP5 o más reciente
  • MySQL 4 o más reciente
  • Librería GD para PHPImagen

Lista de cosas a mejorar:

  • Cambiar navegación y la forma de mostrar contenido a Ajax
  • Poder subir múltiples archivos
  • Poder subir y crear thumbnails a videos

Instalación:

  1. Descomprimir el archivo zip en la carpeta de tiny_mce/plugin
  2. Crear las tablas en tu base de datos MySQL. Usa el archivo jFileBrowser.sql provisto en el zip.
  3. Encuenta el archivo include/config.inc.php y cambia las siguientes lineas por tu información de tu base de datos
    $sql_db = 'Base_de_datos';
    $sql_user = 'Usuario';
    $sql_password = 'Password';
    
  4. Agrega lo sigiente en tu tinyMCE.init():
    añade jfilebrowse a la lista de plugins

    plugins : "jfilebrowser"
    

    añade jfilebrowse a la lista de botones

    theme_advanced_buttons1 : "jfilebrowser"
    
  5. Cambiar los permisos de la carpeta:
    tiny_mce/plugins/jfilebrowser/archivos/

    a 777, osea, que se pueda leer y escribir.