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
- Opciones de TinyMCE. Para más opciones pueden visitar la página oficial de TinyMCE.
- extraParam: defecto - Empty String
- Parametros extras para enviar en la consulta AJAX el formato url string:
variable1=valor1&variable2=valor2
- Parametros extras para enviar en la consulta AJAX el formato url string:
- 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ón dataType de la función ajax() de jQuery. Si se usa json se espera un campo llamado “editor” el cual debe poseer la informació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.
- Tipo de data a recibirse. HTML para el comportamiento defecto. Esto equivale al opción dataType de la función ajax() de jQuery. Si se usa json se espera un campo llamado “editor” el cual debe poseer la información que se quiere colocar en el editor web. El json puede contener cualquier campo adicional, ejemplo:
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
