Foros del Web » Programando para Internet » Javascript »

editor html

Estas en el tema de editor html en el foro de Javascript en Foros del Web. hola.. he visto cientos de mensajes sobre como hacer un editor html como el de estos foros o como el de hotmail. lo que nunca ...
  #1 (permalink)  
Antiguo 06/07/2004, 10:07
Avatar de dieguicho  
Fecha de Ingreso: noviembre-2001
Ubicación: Buenos Aires
Mensajes: 1.190
Antigüedad: 23 años
Puntos: 1
editor html

hola.. he visto cientos de mensajes sobre como hacer un editor html
como el de estos foros o como el de hotmail.
lo que nunca vi es como podria hacerse para aplicar a un texto seleccionado un determinado estilo
por ej ya lo tengo al estilo creado y si quisiera aplicarle el estilo b1 como deberia hacerlo
nadie tiene algo por ahi que me ayude
seria ideal que lo transforme ond seleccion.className='B1'
y no que genere algo como
<span class="bold1">mi texto</span>

sera posible?
un gran saludo para todos
__________________
On error no hago nada porque deje de fumar...
  #2 (permalink)  
Antiguo 06/07/2004, 12:28
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años, 7 meses
Puntos: 1284
Hola dieguicho:

Hay un editor hecho con html/javascript que es muy bueno que se llama htmlarea (o algo parecido), pero estudiar el código es para perderse... son de esos desarrollos gnu (creo)... ... pero si lo que quieres es algo más sencillo, que dentro del mismo textarea ponga cierto tags, fíjate en las FAQs de javascript, que hay un tema para insertar emoticones... y otro con el código del editor de estos foros (la antigua versión... aunque actualmente tampoco edita bien en mozilla)

Si quieres que probar una librería mía, échale un vistazo a esta página: http://www.pepemolina.com/editor/editor.html que tiene un enlace para bajarte esa librería... también inicié un tema sobre el asunto, pero ahora no tengo tiempo para buscarla...

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #3 (permalink)  
Antiguo 07/07/2004, 10:13
Avatar de dieguicho  
Fecha de Ingreso: noviembre-2001
Ubicación: Buenos Aires
Mensajes: 1.190
Antigüedad: 23 años
Puntos: 1
probe lo siguiente... pero sin exito...
aunque pienso que debe ser el camino... ¿correcto?

por un lado el script

function AddCss(){//Identify selected text
var sText = document.selection.createRange();
sText.className='bold1';
alert(sText)
}

y el css

.bold1 { font-size: 14px; font-weight: bold}

no da error pero tampoco le aplica a la seleccion el estilo bold1

revolvi msdn.microsoft.com pero dentro de los execCommand no figura ninguno como para aplicar estilos...

sugerencias?
__________________
On error no hago nada porque deje de fumar...
  #4 (permalink)  
Antiguo 07/07/2004, 12:32
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años, 7 meses
Puntos: 1284
Hola otra vez:

Me temo que es algo más complicado que lo que pones...
Desde luego que con un alert no consigues nada visible...
Para poder dar un formato a una selección, tiene que estar esa selección entre algún tag html (y no vale el textarea)

Puedes hacer lo siguiente:
var sText = document.selection.createRange();

sText = "<span class='bold1'>" + sText + "</span>";
document.body.innerHTML += sText;
o de forma más compleja pero más estandar:

var unDato = document.createElement("span");
unDato.className = "bold1";
var unTexto = document.createTextNode(sText);
unDato.appendChild(unTexto);

document.body.appendChild(unDato);
con esta última línea se añade al final del documento, pero puede añadirse en cualquier otro sitio.

En las FAQs de javascript creo que puse este sistema usando el DOM de manera estandar...

Utra cosa es el uso de createRange() que solo es útil en explorer. En el link que te puse, vale también para mozilla.

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #5 (permalink)  
Antiguo 07/07/2004, 13:33
Avatar de dieguicho  
Fecha de Ingreso: noviembre-2001
Ubicación: Buenos Aires
Mensajes: 1.190
Antigüedad: 23 años
Puntos: 1
no comprendi como situar sText en lugar del texto original y no al final del documento....
me explicas eso?
gracias x la paciencia
__________________
On error no hago nada porque deje de fumar...
  #6 (permalink)  
Antiguo 13/07/2004, 09:19
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 22 años
Puntos: 317
Hola dieguicho , caricatos :

Quisiera agregar un aparte al tema. Lo de seleccionar parte de un texto y darle otro formato se puede hacer habilitando el modo de edición en el documento. Funciona en IE5.5 ( 6 pone alguna objeción ), Netscape compatible y creo que tambien en Mozilla.

Si alguien está viendo la página en uno de esos navegadores puede pegar en la barra de direcciones

javascript:document.body.contentEditable='true';do cument.designMode='on';void(0)

y dar un [ENTER]. Los cambios se hacen con [CTRL]+[B] negrita; [CTRL]+[I] cursiva; [CTRL]+[U] subrayada; [CTRL]+[K] enlace; ...

En un documento sería

Código:
<HTML>
<HEAD>
<script>
function editar(){
document.body.contentEditable='true';
document.designMode='on';
}
</script>
</HEAD>
<BODY>
<h1>QWERTYUIOP</h1>
<p>
<b>Qwertyuiop</b>
</p>
<p>
<i>Qwertyuiop</i>
</p>
<p>
Qwertyuiop
</p>
<span onclick="this.innerHTML=''; editar()">Click aquí para editar.</span>
</BODY>
</HTML>
NOTA : En algunos idiomas de navegador los comandos pueden cambiar. p.e. [CTRL]+[K] cursiva; [CTRL]+[L] enlace; ...

saludos

furoya
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 09:21.