No existe ninguna imagen

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

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
Be Sociable, Share!
  • http://www.youtube.com/mac300989 mac

    Primero que nada excelente tus plugins quisiera colaborar :).
    aa y una sugerencia para este excelente plug ing

    $(‘.jtinymceajax’).jTinyAjax({
    url: “index.php”
    })
    cuando devuelve si lo recibo en onSucces: function(message)…etc
    y lo pongo digamos en elm1.html(message)
    bueno si en php imprimi, un error me sustituira el texto que haya hecho anteriormente :S, seria bueno que pudiera devolver un array.
    digamos data[0];
    data[1];
    asi en data[0] es el documento normal y en data[1].si hubo algun error
    con jquery indico $(“#estado”).html(data[1]);

    :) asi sabriamos si se guardo todo en ajax y sin afectar.
    y quizas otros parametos por si necesitamos mas perzonalizacion:
    data[2];
    data[3];
    data[4];

    • http://juaniquillo.com/blog/members/juaniquillo/ juaniquillo

      Gracias por el consejo. Si te das cuenta yo uso el metodo $.ajax() para hacer la llamada ajax. Igual que usando jquery puedes cambiar el tipo de data que se recibe. Puedes usar la opción ajaxTypeData (el que uso para la opción dataType en $.ajax()) para cambiar el tipo de data. Podrías cambiarlo a json y utilizar construir un array en el lado del servidor y recibirlo como dices.

      Espero que te sirva, y saludos.

      • http://www.youtube.com/mac300989 Mac

        hola disculpa entonces puedo cambiar directamente a json desde la opcion en
        de esta manera?
        $(‘.editor’).jTinyAjax({
        url: pagina,
        ajaxTypeData: “json”

        y solo imprimo en el servidor php por ejemplo:
        echo ‘{ “datos”: ['.$_POST['data'].’,”actualizacion exitosa”] }’;

        despues en esta funcion
        onSuccess: function(data){
        var myJsonObj = jsonParse(data);
        alert(“0 : “+myJsonObj[0]);
        alert(“2 : “+myJsonObj[1]);
        }
        no me funciono :(. el onSuccess ya no responde, es decir si manda al php y realiza lo que tiene que realizar eso lo se por que mi php genera un txt, y lo hace bien, pero despues ya no ejecuta los mensajes :s. k puede ser?

  • http://www.youtube.com/mac300989 Mac

    Disculpa llego mi otro comentario?

    • http://www.youtube.com/mac300989 Mac

      veo que no asi que lo volvere a postear.
      en php imprimo esto
      echo ‘{ “datos”: ['.$_POST['data'].’,”actualizacion exitosa”] }’;

      en los parametros
      $(‘.editor’).jTinyAjax({
      url: pagina,
      tinymceinit : initTine,
      UIfy: true,
      ajaxTypeData: “json”,
      desde que puse lo de json ya no funciona el onSuccess, pero si me ejecuta el ajax correctamente con el php, por que mi php genera un txt, y si lo hace.
      pero esta funcion ya no funciona :S
      onSuccess: function(data){
      var myJsonObj = jsonParse(data);
      alert(“0 : “+myJsonObj[0]);
      alert(“2 : “+myJsonObj[1]);
      }
      a que se debe que hice mal?

    • http://juaniquillo.com/blog/members/juaniquillo/ juaniquillo

      Se que hiciste varios comentarios pero los hiciste en diferentes posts.

  • http://www.youtube.com/mac300989 Mac

    Bueno la verdad no veo mi comentario :S asi que lo pondre una vez mas
    configure el json
    $(‘.editor’).jTinyAjax({
    url: pagina,
    tinymceinit : initTine,
    UIfy: true,
    ajaxTypeData: “json”,
    despues en php esto imprimo:
    echo ‘{ “datos”: ['.$_POST['data'].’,”actualizacion exitosa”] }’;
    y me ejecuta el php bien, me genera un txt y si lo realiza.
    pero lo que ya no me funciona es onSuccess, ya no realiza los mensajes ni nada :s. como si no entrara al evento.
    onSuccess: function(data){
    var myJsonObj = jsonParse(data);
    alert(“0 : “+myJsonObj[0]);
    alert(“2 : “+myJsonObj[1]);
    }
    :s que estoy haciendo mal? Gracias :).

  • http://www.youtube.com/mac300989 mac

    hola una disculpa la verdad no me di cuenta :s..solo veia que no aparecian por eso postee pero de todos modos no los veo en ningun lado…
    y por cierto ya lo pude hacer :) me estaba fallando el lado servidor asi que implemente el encode de json que trae el php 5 :).
    saludos ahora estoy intentando modificar el plugin para subir archivos a cualquier parte o carpeta predestinada :). Saludos

    • http://juaniquillo.com/blog/members/juaniquillo/ juaniquillo

      Ya vi cual era el problema. Tus posts habían caído al folder de spam, la verdad es que no sé por qué. Los he habilitado y siguiendo tu código me di cuenta del bug del que hablas. He revisado el código y ahora funciona. Ve la parte donde hablo del atributo “ajaxTypeData” para veas que necesitas hacer.

      Gracias por probar el plugin. Espero contar contigo para que también pruebes las siguientes versiones.

      Saludos.

    • http://juaniquillo.com/blog/members/juaniquillo/ juaniquillo

      Otra cosa. También he puesto un ejemplo en el Demo 1 para poder visualizarlo mejor.

  • http://aunno pablo

    legal!!

  • alex

    Hola juaniquillo .. puedo usar el plugin de tyni mce que hicistes jfilebrowser en mi chamba que es un proyecto ???? …porfa di que si!!!!
    saludos desde peru

    • juaniquillo

      Claro que si Alex. Puedes usarlo como quieras. No he incluido la liciencia en el artículo pero si te das cuenta la incluyo en mismo plugin:

      http://juaniquillo.com/codigo/jquery/jTinyAjax/1.0/js/jTinyAjax.jquery.js

      Saludos.

      • alex

        O sea man entonces si me das permiso….yes!!!!.. pero no creo que tenga inconvenientes con la licencia que esta en el plugin..ya que tu me das los permisos correspondientes no man!!???

        • juaniquillo

          No tienes restricciones para usar el plugin. Para una traducción de la licencia puede verla aquí:

          http://es.wikipedia.org/wiki/MIT_License

          • alex

            aya!!! a eso te referias…ahora si lo entendi…..lo dejare intacto….gracias por todo. (n_n)

  • Mac

    Disculpa he posteado un comentari previo, y no lo veo aqui :(, y siguiendo con el comentario no puedo solucionar el problema para que tinyajax funcione bien con JSOn:( me podrias ayudar?

    • juaniquillo

      Ve el ejemplo del primer demo donde uso json

  • Joaquin

    Hola muy bueno el Plugin!! como hago para que los cambios se guarden una vez que los realizo y no vuelvan como estaban al actualizar el nevagador? muchas gracias!

    • juaniquillo

      Necesitas guardar la información. Yo uso una base de datos (MySQL) y PHP para interactuar con ella.