Textarea y adentro HTML

August · #1 (**permalink**) 14/01/2011, 16:43

Hola

No estoy buscando un editor wysiwyg, porque no necesito eso, solo necesito el metodo o la idea de como le hace este foro el vBulletin, que dentro de un textarea pueda tener HTML y leerlo como tal

Alguien me puede ayudar con esto?

Saludos y gracias de antemano

maycolalvarez · #2 (**permalink**) 14/01/2011, 22:03

te equivocas, vbulletin usa un wysiwyg con iframe, cuando sale el textarea aparece el BBcode

August · #3 (**permalink**) 14/01/2011, 22:36

Cita:

Iniciado por maycolalvarez

te equivocas, vbulletin usa un wysiwyg con iframe, cuando sale el textarea aparece el BBcode

Estuve mirando en el codigo y no le he encontrado, no se si podrias decirme como le hacen o aunque sea una idea a grandes rasgos como le hacen para poder escribir en un iframe

maycolalvarez · #4 (**permalink**) 14/01/2011, 22:54

Cita:

Iniciado por August

Estuve mirando en el codigo y no le he encontrado, no se si podrias decirme como le hacen o aunque sea una idea a grandes rasgos como le hacen para poder escribir en un iframe

los editores wysiwyg son en realidad iframes y se utiliza mucho código js para editar el DOM directamente, es un tema complejo que manejan verdaderos expertos en js, yo no me he tomado la molestia de investigar aunque tengo leves ideas para hacerlo, por lo demás ¿para que re-inventar la rueda?: existen muchos wysiwyg que puedes implementar como FCKeditor y muchos otros

August · #5 (**permalink**) 14/01/2011, 23:05

Cita:

Iniciado por maycolalvarez

los editores wysiwyg son en realidad iframes y se utiliza mucho código js para editar el DOM directamente, es un tema complejo que manejan verdaderos expertos en js, yo no me he tomado la molestia de investigar aunque tengo leves ideas para hacerlo, por lo demás ¿para que re-inventar la rueda?: existen muchos wysiwyg que puedes implementar como FCKeditor y muchos otros

Bueno gracias por contestar, pero por fines didacticos, si podrias explicar en terminos generales o sea decir usan un innerHTML, para cambiar los elementos.

No se si podrias explicarnos, no para reinventarlos, pero si por motivos de cultura general, didacticos

IsaBelM · #6 (**permalink**) 15/01/2011, 06:23

con esto te puedes hacer una idea

Panino5001 · #7 (**permalink**) 15/01/2011, 06:55

Gracias por la referencia a mi página , Isabel.

Pero más allá de que se puede hacer con iframe, los navegadores modernos permiten hacerlo todavía más fácil y sin iframe gracias al soporte que le han dado en los últimos años a la propiedad contentEditable. El pionero de esta propiedad fue Explorer (no todos deben ser palos para ese navegador, quien además fue pionero de innerHTML y de la primera forma de AJAX, sin contar sus filtros propietarios que dieron pie a Apple para inventar el objeto canvas). Un ejemplo sencillo sin iframe:

Código PHP:

  <!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=utf-8" /> 

<title>Documento sin título</title> 

<script> 

function formatText(cmd){ 

    document.execCommand(cmd, false, null); 

} 

function insertarImagen(){ 

    var u; 

    if(!(u=prompt('ingresar url','http://')))return; 

     document.getElementById('pp').focus(); 

     document.execCommand("InsertImage",false,u); 

}  

</script> 

</head> 

 
<body> 

<form action="" method="get"> 

  <input name="input" type="button" onclick="formatText('bold')" value="NEGRITA" /><input name="input" type="button" onclick="formatText('italic')" value="CURSIVA" /><input name="input" type="button" onclick="formatText('underline')" value="SUBRAYADO" /><input name="input" type="button" onclick="insertarImagen()" value="INSERTAR IMAGEN" /> 

</form> 

<div id="pp" contenteditable="true">Este es un texto editable</div> 

</body> 

</html>

Como se ve, sólo se trata de analizar el funcionamiento del método execCommand. No estoy para nada de acuerdo con que sea cosa de expertos en javascript.

IsaBelM · #8 (**permalink**) 15/01/2011, 13:36

Cita:

Iniciado por Panino5001

Gracias por la referencia a mi página , Isabel.

no sabía que era tuya. es una web que consulto mucho, sobre todo para analizar los código. me ha sido de mucha ayuda para entender muchas cosas

August · #9 (**permalink**) 22/01/2011, 16:56

Gracias a todos, y exactamente si algo fuera para expertos y no entendible para cualquier interesado, nadie seria experto, bueno, pues gracias a todos y en tu sitio hablas de un filemanager, estare al pendiente de tu sitio para verlo

Saludos