Cargar tinyMCE dinámicamente

[valenti77]

Hola gente, estoy tratando de cargar textareas dinamicamente, la cosa va bien, el pequeño detalle es que no aparece el editor tiny, alguna idea de porque puede ser ? Es decir, se ven los textarea perfectamente, pero no aparece la funcion editor de texto para este textarea.

Esta es la funcion que trae el textarea:

Código:

<script>
    // Declare the form field count javascript variable so you know how many the user have added.
    //The CGI.REQUEST_METHOD bit is the CF code for setting this variable back to the count where it was last up to.
    var tFormFieldCount = 1;
    var tFormFieldList = "";
    
    // Function to dynamically insert the form field to the cell below. If you want textareas or other form elements, just create another function and change the html insert text below.
    function MakeOne(FieldType) {
        // Depending on what type of form fields the user choose then dynamically write the appropriate form element to the page
        if (FieldType == 'TextInput') {
            document.getElementById('DynamicContent').innerHTML += 'Noticia ' + tFormFieldCount + '-<input type="text" name="titulo[]" value="titulo" size="60" maxlength="100" /><br /><br /><input type="text" name="subtitulo[]" value="subtitulo" size="60" maxlength="200" /><br /><br />	<textarea style="width: 80%;" cols="80" rows="15" name="elm1" id="elm1">Escriba la noticia aqui </textarea><div><br /></div><br /><div id="pregunta">¿Desea Agregar audio?</div><div id="archi"><input name="archivo" type="file" id="archivo"></div><input type="submit" value="Vista Previa" name="vistaprev" id="prev"/>';
        } else if (FieldType == 'Textarea') {
            document.getElementById('DynamicContent').innerHTML += 'Form Element ' + tFormFieldCount + '- Textarea&nbsp;&nbsp;<textarea name="Textarea' + tFormFieldCount + '" cols=30 rows=3></textarea><br>';
        }
        
        // Populate the form element list.
        if (tFormFieldList == "") {
            tFormFieldList = FieldType;
        } else {
            tFormFieldList += "," + FieldType;
        }
        
        document.forms[0].FormFieldCount.value = tFormFieldCount;
        document.forms[0].FormFieldList.value = tFormFieldList;
        tFormFieldCount++;
    }
    
    // Just a function to check if the user have added any text input fields.
    function CheckIt() {
        if (tFormFieldCount == 1) {
            alert('You must add at least one text input field.');
            return false;
        }
    return true;
    }
</script>

Muchas gracias de antemano

[chalchis]

mmm recuerda que por cada text lleva una configuracion por cada uno revisa que no estes usando el mismo para varios text tarea en la mism pagina

saludos

[valenti77]

No entendi lo que querias decir con la configuracion, me podrias volver a explicar? Nose a cual configuracion te referis, mil disculpas, y gracias por tu respuesta.

Saludos

[valenti77]

tambien descubrí que el nombre del textarea es "elm1", y tendría que ser "elm1[]", asi luego lo puedo tratar como array en php.

Los demás salen como "subtitulo[]" y "titulo[]", pero no entiendo porque el textarea no lo hace.

Ya encontré, parece que el editor se carga junto con la pagina una sola vez, y al crear nuevas textareas, se necesitaria volver a cargar el init del editor, pero no se como hacerlo, Alguien sabe?

Saludos!

[chalchis]

ok creo que ya entendi quieres generar campos dinamicos con javascript
bueno mira trate de hacer un ejmplo usando un ejemplo del sitio del editor

Código:

<script type="text/javascript" src="<your installation path>/tiny_mce/tiny_mce.js"></script>
02.
<script type="text/javascript">
03.
function setup() {
04.
tinyMCE.init({
05.
mode : "textareas",
06.
theme : "advanced",
07.
plugins : "safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",
08.
theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
09.
theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
10.
theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
11.
theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak",
12.
theme_advanced_toolbar_location : "top",
13.
theme_advanced_toolbar_align : "left",
14.
theme_advanced_statusbar_location : "bottom",
15.
theme_advanced_resizing : true
16.
});
17.
}
18.
</script>
19.
 
20.
<form method="post" action="somepage">
21.
<textarea name="content" style="width:100%">
22.
</textarea>
23.
<a href="javascript:setup();">Load TinyMCE</a>
24.
</form>

ahora probe usando un script para generar los textarea
de este site solo hay que modificarlo para que cree textearea en lugar de input text

http://www.mredkj.com/tutorials/tableaddrow.html

ahora carga las propiedades del editor en una funcion
asi como mencione en el sitio oficial viene un ejemplo
http://tinymce.moxiecode.com/examples/example_12.php

Código:

<script type="text/javascript">
function setup() {
tinyMCE.init({
mode : "textareas",
theme : "advanced",
plugins : "safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",
theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : true
});
}
</script>

ahora pueba creando los textarea ya sea usando tu script o el que pongo
de ejmplo inserta esta linea siguientes en alguna parte body de la pagina
despues de crear los textares ejecuta la función yu veras que todo los textareas
se les cargara el estilo del editor, solo hay que ver ahora como cargarse de manera
automativa, disculpa que escriba asi de rapido pero voy de salida

Código:

ejemplo
<body>
<a href="javascript:setup();">Load TinyMCE</a>
.
.
.
</body

saludos

[valenti77]

perfecto, habia probado llamar a init, agregando el function setup, ahora si funciona perfecto.

Muchisimas gracias!

[chalchis]

seria bueno que publiques toda la solución para futur@s camaradas

saludos