editor html

dieguicho · #1 (**permalink**) 06/07/2004, 10:07

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

caricatos · #2 (**permalink**) 06/07/2004, 12:28

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

dieguicho · #3 (**permalink**) 07/07/2004, 10:13

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?

caricatos · #4 (**permalink**) 07/07/2004, 12:32

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

dieguicho · #5 (**permalink**) 07/07/2004, 13:33

no comprendi como situar sText en lugar del texto original y no al final del documento....
me explicas eso?
gracias x la paciencia

furoya · #6 (**permalink**) 13/07/2004, 09:19

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