No existe ninguna imagen

Posts Tagged ‘plugin’

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