Editor HTML

pato12 · #1 (**permalink**) 24/08/2008, 14:12

Hola,
Encontre un editor en este foro (no me acuerdo el post) y el codigo es: (esta un poco editado por mi)

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title></title> 
<script language="javascript1.2"> 
var editor; 
function $(id){ 
    return document.getElementById(id); 
} 
function formato(f){ 
    editor.execCommand(f, false, null); 
} 
function rev(t)    { 
    return t.split("<").join("&lt;").split(">").join("&gt;").split("\"").join("&quot;"); 
} 
function insertarEnlace(){ 
    var u; 
    if(!(u=prompt('ingresar url','http://')))return; 
    editor.execCommand("CreateLink",false,u); 
} 
function insertarImagen(){ 
    var u; 
    if(!(u=prompt('ingresar url','http://')))return; 
    editor.execCommand("InsertImage",false,u); 
} 
function color(){ 
c=prompt('Ingrese el color en forma HTML','');
if(c){  
    editor.execCommand("forecolor",false,c); 
	}
} 

function colorFondo(){
c=prompt('Ingrese el color en forma HTML','');
if(c){  
    var h=window.ActiveXObject?'backcolor':'hilitecolor'; 
    editor.execCommand(h,false,c); 
} 
}
function inHTML(){ 
    var u,u2; 
    if(!(u=prompt('ingresar html')))return; 
     
        try{ 
            editor.execCommand("inserthtml",false,u); 
        }catch(e){ 
            try{ 
                u2=editor.selection.createRange(); 
                u2.pasteHTML(u); 
            }catch(E){ 
                alert('Codigo no reconocido.'); 
            } 
        } 
} 

function htmlOEditor(e){ 
e=e || window.event; 
ob=e.target || e.srcElement 
$('edit').style.display=(ob.value=='html')?'none':'block'; 
$('ht').style.display=(ob.value!='html')?'none':'block'; 
$('ht').innerHTML=rev(editor.body.innerHTML); 
ob.value=(ob.value=='html')?'editor':'html'; 
}
window.onload=function(){ 
    editor=$('edit').contentDocument || $('edit').contentWindow.document; 
    editor.designMode='on';
} 
</script> 
</head> 

<body> 
<form id="form1" name="form1" method="post" action="">
  <input type="button" name="Button" value="B" onclick="formato('bold')" /> 
  <input type="button" name="Submit2" value="I" onclick="formato('italic')" /> 
  <input type="button" name="Submit3" value="U" onclick="formato('underline')" /> 
  <input type="button" name="Submit4" value="Remover formato" onclick="formato('RemoveFormat')" /> 
  <input type="button" name="Submit5" value="Insertar link" onclick="insertarEnlace()" /> 
  <input type="button" name="Submit9" value="Quitar link" onclick="formato('Unlink')" /> 
  <input type="button" name="Submit6" value="Agregar una imagen" onclick="insertarImagen()" /> 
  <input type="button" name="Submit7" value="Cambiar el color del texto" onclick="color()" /> 
  <input type="button" name="Submit8" value="Cambiar el color del fondo del texto" onclick="colorFondo()" /> 
    <input type="button" name="Submit10" value="Deshacer" onclick="formato('undo')" /> 
  <input type="button" name="Submit11" value="Rehacer" onclick="formato('redo')" /> 
  <input type="button" name="Submit12" value="Insertar html" onclick="inHTML()" /> 
  <br /> 
<iframe id="edit" width="100%" height="300" style=" border:1px solid #000;" src=""></iframe>  
</form><br /> 
</body> 
</html>

Y quiesiera saber como enviarlo por POST o guardarlo en un hidden para enviar en un post.
Gracias
Salu2

Panino5001 · #2 (**permalink**) 24/08/2008, 14:22

Todo el html a guardar lo podés obtener con: editor.body.innerHTML

pato12 · #3 (**permalink**) 24/08/2008, 14:25

Hola,
Eso ya se. Pero no se como enviarlo por post o guardarlo en un hidden .
Igual gracias.
Salu2

Panino5001 · #4 (**permalink**) 24/08/2008, 14:31

Cita:

Iniciado por pato12

Hola,
Eso ya se. Pero no se como enviarlo por post o guardarlo en un hidden .
Igual gracias.
Salu2

Podrías agregarle al formulario de envío un evento onsubmit que añada el valor a un campo oculto:

Código PHP:

  function enviar(){

document.getElementById('idCampo').value=editor.body.innerHTML;

return true;

}

<form onsubmit="return enviar();">

pato12 · #5 (**permalink**) 24/08/2008, 14:45

Hola Panino5001,
Mil gracias. Funciona perfecto.
Gracias!!
Salu2

Panino5001 · #6 (**permalink**) 24/08/2008, 14:49

Me alegra que te sirva

pato12 · #7 (**permalink**) 24/08/2008, 14:56

Hola,
Otra pregunta:
Una funcion que sirva para sentrar:
formato('no se que poner');
Gracias
Salu2

Panino5001 · #8 (**permalink**) 24/08/2008, 15:08

es un parámetro para execCommand: justifycenter
Acá tenés todos los parámetros disponibles:
http://www.mozilla.org/editor/midas-spec.html

pato12 · #9 (**permalink**) 24/08/2008, 15:14

Hola,
Otraves Mil gracias
Gracias
Salu2

pato12 · #10 (**permalink**) 24/08/2008, 15:58

Hola,
Tengo un nuevo problema:
Si apreto fuera del editor y pongo una nueva imagen me lo pone fuera del editor.
¿Porque?
Gracias
Salu2

PD: Le ise muchas modificasiones.