Editor wywisig mootols efectorelativo.net

[Ruben_JD]

Hola a todos, Necesito una pequeña gran ayuda, quiero implementar este wywisig de mootols de la pagina web efectorelativo en mi sitio web, especificamente el ejemplo 3.

El problema dos forms uno propio para enviar los datos a la BD (funciona bien solo sin el editor)y el otro del editor de texto para cargar las imagenes, cargo la imagen coloco el texto pero no se envia los datos me podrian dar una guia de como obtener esos datos con un solo form.

He probado con botones tipo button y no submit pero no se envia la info ni por post ni get, cambiando la posicion de los forms, pero la imagen se envia a la pagina de foto_upload.php y no se carga dentro de la pagina donde esta el editor, tambien he renombrado el codigo mootols para cambiar el nombre del form y del id sample 3 del ejemplo y nada, cargan las imagenes pero no se envia nada. he buscado algunos consejos del foro pero no funciona.

Alguien que me pueda dar una mano gracias

[masterpuppet]

Que tal Ruben_JD, podes mostrar lo que tenes echo ? , porque tal cual esta el ejemplo no funciona, igualmente te comento que tenes que agregar el evento submit al forumlario del editor y en el hacer un toTextarea.

Saludos.

[Ruben_JD]

Gracias por responder rapido, mira es para modificar el contenido de mi base de datos:

Código PHP:

 <div id="sample3">
    <div>
        <form action="procesar_mi_pagina.php" method="post">
        <textarea name="contenido" rows="5" cols="30"><? echo $sql['datos_mi_base'];?></textarea>
        <div><input type="submit" value="Guardar" /></div>
        </form>
    </div>

    <div id="imgs">
<!-- Carga la imagen aqui -->
    </div>

    <form action="foto_upload.php" method="post" enctype="multipart/form-data">
        <div><input type="file" name="file" id="fileInput"/> <input type="submit" value="Cargar foto" /></div>
    </form>
</div>  

e intentado darle nombres a los forms y cambiarles a <button type button. pero no me ha funcionado, me podrias dar una mano

[masterpuppet]

Y el javascript?, igual te comento que deberias darle un id a cada formulario.

[Ruben_JD]

el codigo es el mismo, no lo puse porque pense que lo habia dicho ya que es el de la pagina mismo.

Código:

var W3 = new wysiwyg({
	textarea: $('sample3').getElement('textarea'),
	src:'_wysiwyg.html'
});

var imgs = $('imgs');
imgs.getElements('img').each(function(el){el.addEvent('click',W3.exec.bind(W3,['img',el.src]));});

var form = $('sample3').getElement('form').addEvent('submit',function(){
	if(!form.getElement('input').value.test(/\.jpg$/i)){
		alert('Debe seleccionar archivo tipo JPG.');
		return false;
	}
	UIF.send(form,'uploader',onUploadImage);
});

var onUploadImage = function(response){
	var	image = 'img/'+response;
	new Element('input',{'type':'file','name':'file'}).replaces(form.getElement('input'));

	new Element('img',{'src':image}).addEvent('click',W3.exec.bind(W3,['img',image])).injectTop(imgs);
	imgs.scrollTo(0,0);

	W3.exec('img',image);
};

con respecto al id que me propones, eso es lo que he tratado de hacer darle un nombre y un id a cada form, pero no me reconoce como distinto, que puedo modificar el el jscript para que sea diferente el un form del otro esa creo que seria la pregunta en si.
Gracias nuevamente

[masterpuppet]

Suponiendo que los id's fueran formTxt y formFile podria ser algo asi:

Código Javascript:

var formTxt = $('sample3').getElement('#formTxt');
var W3 = new wysiwyg({
    textarea: formTxt,
    src:'_wysiwyg.html'
});
formTxt.addEvent('submit', function(e){
  W3.toTextarea();
});
 
 
var imgs = $('imgs');
imgs.getElements('img').each(function(el){el.addEvent('click',W3.exec.bind(W3,['img',el.src]));});
 
var form = $('sample3').getElement('#formFile').addEvent('submit',function(){
    if(!form.getElement('input').value.test(/\.jpg$/i)){
        alert('Debe seleccionar archivo tipo JPG.');
        return false;
    }
    UIF.send(form,'uploader',onUploadImage);
});
 
var onUploadImage = function(response){
    var image = 'img/'+response;
    new Element('input',{'type':'file','name':'file'}).replaces(form.getElement('input'));
 
    new Element('img',{'src':image}).addEvent('click',W3.exec.bind(W3,['img',image])).injectTop(imgs);
    imgs.scrollTo(0,0);
 
    W3.exec('img',image);
};
 

Saludos.

[Ruben_JD]

Gracias masterpuppet, en la linea 12 de tu codigo es imgs.getElements ó imgs.getChildren(), porque he realizado los cambios, pero se divide en dos partes, una con el editor sin el texto de prueba y otra si en editor con texto de prueba como un simple textarea mas el cargador de imagenes. sin funcionamiento.

Código HTML:

<div id="sample3">
    <div>
        <form action="procesar_mi_pagina.php" method="post" id="formTxt">
        <textarea name="contenido" rows="5" cols="30"><p>texto de prueba</p></textarea>
        <div><input type="submit" value="Guardar" /></div>
        </form>
    </div>
 
    <div id="imgs">
<!-- Carga la imagen aqui -->
    </div>
 
    <form action="foto_upload.php" method="post" enctype="multipart/form-data" id="formFile">
        <div><input type="file" name="file" id="fileInput"/> <input type="submit" value="Cargar foto" /></div>
    </form>
</div>
 

Código Javascript:

var formTxt = $('sample3').getElement('#formTxt');
var W3 = new wysiwyg({
    textarea: formTxt,
    src:'_wysiwyg.html'
});
formTxt.addEvent('submit', function(e){
  W3.toTextarea();
});
 
 
var imgs = $('imgs');
imgs.getElements('img').each(function(el){el.addEvent('click',W3.exec.bind(W3,['img',el.src]));});
 
var form = $('sample3').getElement('#formFile').addEvent('submit',function(){
    if(!form.getElement('input').value.test(/\.jpg$/i)){
        alert('Debe seleccionar archivo tipo JPG.');
        return false;
    }
    UIF.send(form,'uploader',onUploadImage);
});
 
var onUploadImage = function(response){
    var image = 'img/'+response;
    new Element('input',{'type':'file','name':'file'}).replaces(form.getElement('input'));
 
    new Element('img',{'src':image}).addEvent('click',W3.exec.bind(W3,['img',image])).injectTop(imgs);
    imgs.scrollTo(0,0);
 
    W3.exec('img',image);
};
 

que podria estar haciendo mal.
Lo que deseo es que el formTxt en este caso tenga las funciones del editor de texto, y que el formFile solo carge la imagen dentro de la pagina principal donde se encuentran los dos forms, asi el primer form tiene el texto de mi base de datos y el segundo subir una imagen, obteniendo en el primer form el texto y la imagen a guardar en la base de datos.

[masterpuppet]

La diferencia entre getChildren y getElements es que el primero "escanea" en el primer nivel de descendientes mientras que el segundo "escanea" todos los niveles.
Cambia el inicio del script a esto:

Código Javascript:

var formTxt = $('sample3').getElement('#formTxt');          
var W3 = new wysiwyg({
   textarea: formTxt.getElement('textarea'),
   src:'_wysiwyg.html'
});
...
 

Proba y nos comentas.

[Ruben_JD]

Realizado el cambio, el form que contiene el textarea tiene el editor, es decir uno solo y el form de la imagen sube la imagen pero aparece en la pagina foto_upload.php imprimiendo el nombre de la imagen y no cargando en la principal.

Código PHP:

<?php
/*foto_upload.php*/
if(isset($_FILES['file'])){
 
    $type = substr($_FILES['file']['name'],strrpos($_FILES['file']['name'],'.'));
    $image_name = time().$type;
 
    $path = './img/';
 
    if(!copy($_FILES['file']['tmp_name'],$path.$image_name)){
        $image_name = 'no';
    }
 
}else{
    $image_name = 'nop';
}
?>
<html><head></head><body><?php echo $image_name; ?></body></html>
 

la imagen debe subir a una carpeta y presentarse en la pagina principal donde estan los form.

[masterpuppet]

El código esta en el domready y tenes cargado el fichero _uif.js ?, porque UIF es el encargado de setear el target al iframe donde se envía el post de las imagenes, tenes activado firebug ?

[Ruben_JD]

Todo esta cargado bien, las imagenes si cargaban y se presentaban antes de realizar el cambio que me recomendaste, no se como usar el firebug, pero que busco ahi, donde esta guardando, o donde esta enviando.

Gracias masterpuppet por tus respuestas ya falta poco y no te molesto mas

[masterpuppet]

Discúlpame Ruben_JD pero me perdí, que te esta fallando ahora ?

[Ruben_JD]

el texto del editor al guardar si lo hace, pero al ingresar una imagen para colocarla en el editor la imagen cargar solo en la carpeta es decir que no se muestra en la pagina donde esta el editor para poder alterar la imagen darle un tamaño o posicion, lo que la imagen deberia verse en mi_pagina_editor.php se ve en la foto_upload.php, antes de las modificaciones la imagen si cargaba en mi_pagina_editor.php y en su respectiva carpeta.

[masterpuppet]

Lamentablemente sigo sin ver el problema, si antes funcionaba bien, tira los cambios para atrás, no podes zipear y subir el código a algún lugar ?

[Ruben_JD]

solucionado, el codigo de masterpuppet esta en lo correcto, mi error al escribir ese codigo.
Gracias masterpuppet.