Foros del Web » Programando para Internet » Jquery »

tinyMCE y jquery, deja de funcionar para multiples textareas dinamicos

Estas en el tema de tinyMCE y jquery, deja de funcionar para multiples textareas dinamicos en el foro de Jquery en Foros del Web. Hola amigos, comentarles que estoy trabajando con el editor tinyMCE. Esto funciona excelente: Por defecto tengo que: @import url("http://static.forosdelweb.com/clientscript/vbulletin_css/geshi.css"); Código Javascript : Ver original tinyMCE. ...
  #1 (permalink)  
Antiguo 29/09/2011, 07:37
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 14 años, 9 meses
Puntos: 269
tinyMCE y jquery, deja de funcionar para multiples textareas dinamicos

Hola amigos, comentarles que estoy trabajando con el editor tinyMCE.

Esto funciona excelente:
Por defecto tengo que:
Código Javascript:
Ver original
  1. tinyMCE.init({mode : 'textareas', theme : 'simple'});
Código HTML:
Ver original
  1. <textarea name="descripcion_caracteristicas[]"></textarea>

Bien, el problema se presenta cuando cargo más textareas de modo "dinamico" con javascript(jquery):

Código Javascript:
Ver original
  1. $('<textarea>',{name:'descripcion_caracteristicas[]'}).appendTo("#contenedor_textarea");
Aquí, como es lógico que pase, solo se crean los textareas pero no se le asigna el tinymce.

Como podré hacer que los nuevos textareas que se vallan creando vallan entendiendo que deben tomar al tinymce.

¿me explico?

Desde ya muchas gracias por su ayuda.
  #2 (permalink)  
Antiguo 29/09/2011, 08:15
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 14 años, 9 meses
Puntos: 269
Respuesta: tinyMCE y jquery, deja de funcionar para multiples textareas dinamicos

Solucioné que se muestren tinymce en los textareas múltples:
Código Javascript:
Ver original
  1. function getTiny(){
  2.     tinyMCE.init({mode : 'textareas', theme : 'simple'});
  3. }
  4.  
  5. $("#masespecificaciones").click(function(){
  6.  
  7. $('<textarea>',{name:'descripcion_especificaciones[]'}).appendTo(desc);
  8. getTiny();
  9.  
  10. });
mas ahora se presento otro problema en el envío (por post) del contenido de los textareas:

no me respeta los name del textarea es decir:
Lo que normalmente luciría:
<textarea name="descripcion_especificaciones[]"></textarea>

se destruye y no envía la información.
  #3 (permalink)  
Antiguo 02/10/2011, 12:49
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 14 años, 9 meses
Puntos: 269
Respuesta: tinyMCE y jquery, deja de funcionar para multiples textareas dinamicos

Comparto la solución para quien le sirva, dos archivos:

1 - multiples_textareas.html

Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  3.     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
  4.     <title></title>
  5.     <style type="text/css">
  6.     *{margin:0; padding:0;}
  7.     </style>
  8.     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
  9.     <script type="text/javascript" src="ruta/a/el/plugin/tiny_mce.js"></script>
  10.  
  11.     <script type="text/javascript" >
  12.  
  13.     var tinymceConfigs = [{
  14.             theme : "simple",
  15.             mode : "none",
  16.             },
  17.             {
  18.             theme : "simple",
  19.             mode : "none",
  20.             }];
  21.  
  22.     function addTiny(settingid,el_id) {
  23.         tinyMCE.settings = tinymceConfigs[settingid];
  24.         tinyMCE.execCommand('mceAddControl', true, el_id);
  25.     }
  26.    
  27.     $(function(){
  28.         addTiny(0,"ed0");
  29.         addTiny(1,"ed1");
  30.     });
  31.     ai = 2;
  32.     $("#agregar").live('click', function(){
  33.     identificador= "ed"+ai;
  34.         $("<textarea></textarea>", {id:identificador, name:'descripcion[]'}).appendTo("#formu");
  35.         addTiny(ai,identificador);
  36.     ai++;  
  37.     });
  38.    
  39.     </script>
  40.    
  41. </head>
  42.  
  43.     <form action="post.php" id="formulario" method="post">
  44.         <div id="formu">
  45.             <textarea name="descripcion[]" id="ed0"></textarea>
  46.             <textarea name="descripcion[]" id="ed1"></textarea>
  47.         </div>
  48.         <input type="submit" value="enviar" />
  49.         <input type="button" value="agregar" id="agregar" />
  50.     </form>
  51. </body>
  52.  
  53. </html>

2 - post.php

Código HTML:
Ver original
  1. <a href="multiples_textareas.html">volver</a>
  2. <pre>
  3. <?php
  4. $total = count($_POST["descripcion"]); //debuelve 3 y for empieza a contar de 0
  5. for ($i = 0; $i < $total; $i++) {
  6.    echo $_POST["descripcion"][$i];
  7. }
  8. //listo para insertar con felicidad en la base de datos.
  9. ?>
  10. </pre>


Este codigo es una adaptación de una solución que encontre acá.
  #4 (permalink)  
Antiguo 02/10/2011, 23:39
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 14 años, 9 meses
Puntos: 269
Respuesta: tinyMCE y jquery, deja de funcionar para multiples textareas dinamicos

Otro problema que se me presento es que si enviamos los multiples textareas con $.post() con jquery, es decir, con ajax. Los name no se serializan. Luego de muchas pruebas y errores la solución no pudo ser más simple.
Descargar la version jquery del tinymce y todo empieza a andar magicamente. Los textareas multiples los creas en dos patadas y se serializan los name.

Les dejo un ejemplo funcionando.

multiples_textareas.html
Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  3.     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
  4.     <title></title>
  5.     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
  6.     <script type="text/javascript" src="tinymce_jq/jscripts/tiny_mce/jquery.tinymce.js"></script>
  7.     <script type="text/javascript" >
  8.     $().ready(function() {
  9.         $("textarea").tinymce({
  10.             script_url : 'tinymce_jq/jscripts/tiny_mce/tiny_mce.js',
  11.             theme : "simple"
  12.         });
  13.         $("#agregar").live('click', function(){
  14.             var textarea = $("<textarea name='descripcion[]'></textarea>");
  15.             textarea.appendTo("#formu");
  16.             textarea.tinymce({
  17.                     script_url : 'tinymce_jq/jscripts/tiny_mce/tiny_mce.js',
  18.                     theme : "simple"
  19.             });
  20.         });
  21.         $("#formulario").submit(function(event){
  22.             event.preventDefault();
  23.             $.post(
  24.                 "post.php", $("#formulario").serialize(), function(){ /*callback*/ }
  25.             );     
  26.         });
  27.     });
  28.     </script>
  29. </head>
  30.     <form action="post.php" id="formulario" method="post">
  31.         <div id="formu">
  32.             <textarea name="descripcion[]"></textarea>         
  33.             <textarea name="descripcion[]"></textarea>         
  34.         </div>
  35.         <input type="submit" value="enviar" />
  36.         <input type="button" value="agregar" id="agregar" />
  37.     </form>
  38. </body>
  39. </html>

Etiquetas: multiples, textarea, tinymce
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 03:50.