tinyMCE y jquery, deja de funcionar para multiples textareas dinamicos

cristian_cena · #1 (**permalink**) 29/09/2011, 07:37

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

Esto funciona excelente:
Por defecto tengo que:

Código Javascript:

Ver originaltinyMCE.init({mode : 'textareas', theme : 'simple'});

Código HTML:

Ver original<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$('<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.

cristian_cena · #2 (**permalink**) 29/09/2011, 08:15

Solucioné que se muestren tinymce en los textareas múltples:

Código Javascript:

Ver originalfunction getTiny(){
    tinyMCE.init({mode : 'textareas', theme : 'simple'});
}
 
$("#masespecificaciones").click(function(){
 
$('<textarea>',{name:'descripcion_especificaciones[]'}).appendTo(desc); 
getTiny();
 
});

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.

cristian_cena · #3 (**permalink**) 02/10/2011, 12:49

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

1 - multiples_textareas.html

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title></title>
    <style type="text/css">
    *{margin:0; padding:0;}
    </style>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    <script type="text/javascript" src="ruta/a/el/plugin/tiny_mce.js"></script>
 
    <script type="text/javascript" >
 
    var tinymceConfigs = [{
            theme : "simple",
            mode : "none",
            },
            {
            theme : "simple",
            mode : "none",
            }];
 
    function addTiny(settingid,el_id) {
        tinyMCE.settings = tinymceConfigs[settingid];
        tinyMCE.execCommand('mceAddControl', true, el_id);
    }
    
    $(function(){
        addTiny(0,"ed0");
        addTiny(1,"ed1");
    });
    ai = 2;
    $("#agregar").live('click', function(){
    identificador= "ed"+ai;
        $("<textarea></textarea>", {id:identificador, name:'descripcion[]'}).appendTo("#formu");
        addTiny(ai,identificador);
    ai++;   
    });
    
    </script>
    
</head>
 
<body>
    <form action="post.php" id="formulario" method="post">
        <div id="formu">
            <textarea name="descripcion[]" id="ed0"></textarea>
            <textarea name="descripcion[]" id="ed1"></textarea>
        </div>
        <input type="submit" value="enviar" />
        <input type="button" value="agregar" id="agregar" />
    </form>
</body>
 
</html>

2 - post.php

Código HTML:

Ver original<a href="multiples_textareas.html">volver</a>
<pre>
<?php
$total = count($_POST["descripcion"]); //debuelve 3 y for empieza a contar de 0
for ($i = 0; $i < $total; $i++) {
    echo $_POST["descripcion"][$i];
}
//listo para insertar con felicidad en la base de datos.
?>
</pre>

Este codigo es una adaptación de una solución que encontre acá.

cristian_cena · #4 (**permalink**) 02/10/2011, 23:39

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<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title></title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    <script type="text/javascript" src="tinymce_jq/jscripts/tiny_mce/jquery.tinymce.js"></script>
    <script type="text/javascript" >
    $().ready(function() {
        $("textarea").tinymce({
            script_url : 'tinymce_jq/jscripts/tiny_mce/tiny_mce.js',
            theme : "simple"
        });
        $("#agregar").live('click', function(){
            var textarea = $("<textarea name='descripcion[]'></textarea>");
            textarea.appendTo("#formu");
            textarea.tinymce({
                    script_url : 'tinymce_jq/jscripts/tiny_mce/tiny_mce.js',
                    theme : "simple"
            });
        });
        $("#formulario").submit(function(event){
            event.preventDefault(); 
            $.post(
                "post.php", $("#formulario").serialize(), function(){ /*callback*/ }
            );      
        }); 
    });
    </script>
</head>
<body>
    <form action="post.php" id="formulario" method="post">
        <div id="formu">
            <textarea name="descripcion[]"></textarea>          
            <textarea name="descripcion[]"></textarea>          
        </div>
        <input type="submit" value="enviar" />
        <input type="button" value="agregar" id="agregar" />
    </form>
</body>
</html>