Editor de textos

Masane · #1 (**permalink**) 12/05/2008, 09:50

A ver, estaba intentando hacer un editor wysiwyg, pero visto el por saco q da para mostrar el texto enriquecido, me conformo con uno q inserte etiquetas BBCode....

Tengo el siguiente codigo, q es super basico, solo para probar sin funciona lo q hago, ok?

Código HTML:

<html>
    <head>
    <script type="text/javascript">
function setText()
{
	var texto;
	if (document.selection)
	{ // for IE		
		texto = document.selection.createRange().text;
	}
	else if (typeof this.selectionStart != 'undefined')
	{ // for FF, Opera etc...		
		texto = this.value.substring(this.selectionStart, this.selectionEnd);	
	}
	textoFormateado = "[B]" + texto + "[/B]";
	document.getElementById("txt").value = document.getElementById("txt").value.replace(texto, textoFormateado);		
}
</script>

    </head>
    <body>
    <form name="myForm">
      <textarea name="txt" rows=2 cols=50 onMouseUp="setText()">
      Here is some text in my text area.
      </textarea>            
    </form>    
    </body>
    </html>
    
    <html>
<head>

la cosa, es q en IE funciona bien, aunq me gustaria q me deseleccionara el texto tras insertar las tags, pero en mozilla no fufa...

Soy muy novata con javascript, y se acer lo basico con los formularios, asi q esto me cuesta un poco... El codigo q se ejecuta para el mozilla es un copy-paste q me encontre esta mañana por ahi.

Alguna idea de como grabar los resultados en el textarea para mozilla?

Y alguien q me diga como deseleccionar el texto tras la insercion de las tags del BBCode?

Gracias

PD: Como ago para crear una variable global a todas las funciones de mi archivo *.js? o.o

caricatos · #2 (**permalink**) 12/05/2008, 10:04

Hola:

Tal vez te sirva esta página: Editor de texto

Saludos

Masane · #3 (**permalink**) 12/05/2008, 12:29

Bueno, despues de un rato haciendo pruebas, me funciona medianamente bien en IE, aunq sigue sin rular en mozilla TT.TT ...

alguien sabe como chequear el width y el height de una imagen proporcionada en el formulario desde un input text (amos, sacar el alto y el ancho de una imagen usando una url introducida en el input text del formulario, por si no kedaba muy claro

)???

caricatos · #4 (**permalink**) 12/05/2008, 15:49

Hola:

En el mensaje original, no dices nada de chequear las proporciones de una imagen... y la respuesta sería bastante más fácil, ya que no se puede. javascript no puede obtener datos del navegador, o sea que para obtener esas dimensiones, obligatoriamente debes subirla al servidor.

Saludos

Masane · #5 (**permalink**) 12/05/2008, 15:52

lo dicho niños, alguien q sepa como sacar el width y el height de una imagen proporcionada mediante un link????

Y alguien a kien se le ocurra q poner en mi codigo para q rule en mozilla?

pego el codigo completo, q ya lo tengo terminadito ^^=

Código HTML:

<html>
    <head>
    <script type="text/javascript">
var sel;
    
function setSelection()
{
		var texto;
		if (document.selection)
		{ // for IE		
				 sel = document.selection.createRange().text;
		}
		else if (typeof document.getElementById("mbody").value.selectionStart != 'undefined')
		{ // for FF, Opera etc...		
				 sel = document.getElementById("mbody").value.substring(document.getElementById("mbody").value.selectionStart, document.getElementById("mbody").value.selectionEnd);	
		}						
}

function editFontStyle(style)
{    
    if (sel == null)
    {        
        document.getElementById("mbody").value = document.getElementById("mbody").value + "";
		}
		else
		{
		    var formatSel = "[" + style + "]" + sel + "[/" + style + "]";
		    document.getElementById("mbody").value = document.getElementById("mbody").value.replace(sel, formatSel);
		}    
    sel = null;
 		
}

function editFontSize()
{  
    if (sel == null)
    {
        document.getElementById("mbody").value = document.getElementById("mbody").value + "";
		}
		else
		{
		    var formatSel = "[SIZE=" + document.formNewMsg.size.value + "]" + sel + "[/SIZE]";
				document.getElementById("mbody").value = document.getElementById("mbody").value.replace(sel, formatSel);
		}     
		sel = null;
}

function editFontColor()
{
    if (sel == null)
    {
        document.getElementById("mbody").value = document.getElementById("mbody").value + "";
		}
		else
		{
		    var formatSel = "[COLOR=" + document.getElementById("color").value + "]" + sel + "[/COLOR]"; 
    		document.getElementById("mbody").value = document.getElementById("mbody").value.replace(sel, formatSel);
		}    
    sel = null;
}

function insertQuote()
{
    var name = prompt("Cita de:", "");
    if (name == null)
    {
        name = "";
		}
		
		if (sel == null)
		{
		    document.getElementById("mbody").value = document.getElementById("mbody").value + "";		    
		}
		else
		{
		    var formatSel = "[QUOTE=" + name + "]" + sel + "[/QUOTE]";
				document.getElementById("mbody").value = document.getElementById("mbody").value.replace(sel, formatSel);
		}
		sel = null;
}

function insertLink()
{    
    var textToAdd;    
    var link = prompt("Url de la web:", "h t t p: / /");
    if ((link != null) && (link != "h t t p: / /"))
    {
        if (sel == null)
        {
            var linkName = prompt("Nombre de la web:", "");
				    if (linkName == null)
				    {
				        linkName = link;
						}
						textToAdd = "[U R L=" + link + "]" + linkName + "[/ U R L]";
						document.getElementById("mbody").value = document.getElementById("mbody").value + " " + textToAdd;
				}
				else
				{
				    var linkName = prompt("Nombre de la web:", sel);
				    if (linkName == null)
				    {
				        linkName = link;
						}
						textToAdd = "[U R L=" + link + "]" + linkName + "[/ U R L]";						
						document.getElementById("mbody").value = document.getElementById("mbody").value.replace(sel, textToAdd);
				} 
    }
    sel = null;
}

function insertImg()
{    
    var textToAdd;
    var img = prompt("Url de la imagen:", "h t t p: / /");
    if ((img != null) && (img != "h t t p: / /"))
    {			    	 	 
				if (img.width>100)
				{ 
				    var scale = (100 * 100) / img.width;
				    var new_width = (img.width * scale) / 100;
						var new_height = (img.height * scale) / 100; 
						
						texttoAdd = "[IMG=" + new_width + "x" + new_height + "]" + img + "[/IMG]";	
						document.getElementById("mbody").value = document.getElementById("mbody").value + " " + textToAdd;	
				}
		}
		sel = null;
}
</script>

    </head>
    <body>   
    <form name="formNewMsg">
<INPUT type="button" name="bold" value="B" onClick="editFontStyle('B')" />
<INPUT type="button" name="bold" value="I" onClick="editFontStyle('I')" />
<INPUT type="button" name="bold" value="U" onClick="editFontStyle('U')" />

<SELECT name="color" onChange="editFontColor()">
				<OPTION value=""></OPTION>
				<OPTION value="black">Negro</OPTION>
				<OPTION value="gray">Gris</OPTION>
				<OPTION value="brown">Marr&oacute;n</OPTION>
				<OPTION value="darkblue">Azul oscuro</OPTION>
				<OPTION value="blue">Azul</OPTION>
				<OPTION value="cyan">Celeste</OPTION>
				<OPTION value="darkgreen">Verde oscuro</OPTION>
				<OPTION value="olive">Oliva</OPTION>
				<OPTION value="green">Verde</OPTION>
				<OPTION value="purple">Morado</OPTION>
				<OPTION value="violet">Violeta</OPTION>
				<OPTION value="fucsia">Fucsia</OPTION>
				<OPTION value="pink">Rosa</OPTION>
				<OPTION value="darkred">Rojo oscuro</OPTION>
				<OPTION value="red">Rojo</OPTION>
				<OPTION value="orange">Naranja</OPTION>
				<OPTION value="gold">Oro</OPTION>
				<OPTION value="yellow">Amarillo</OPTION>
				<OPTION value="white">Blanco</OPTION>
</SELECT>

<SELECT name="size" onChange="editFontSize()">
        <OPTION value=""></OPTION>
				<OPTION value="6">Pequeña</OPTION>				
				<OPTION value="10">Normal</OPTION>
				<OPTION value="18">Grande</OPTION>
				<OPTION value="32">Enorme</OPTION>
				<OPTION value="45">Gigante</OPTION>				
</SELECT>

<INPUT type="button" name="cita" value="Cita" onClick="insertQuote()" />
<INPUT type="button" name="link" value="Link" onClick="insertLink()" />
<INPUT type="button" name="img" value="Imagen" onClick="insertImg()" />    
<BR>
      <textarea name="mbody" rows=5 cols=50 onMouseUp="setSelection()"></textarea>  
<BR>      
<INPUT onClick="document.write(document.getElementById('mbody').value)" type="button" name="boton" value="Vista Previa" />	
<INPUT onClick="document.getElementById('mbody').value=''" type="button" name="boton" value="Borrar" />		          
    </form>    
    </body>
    </html>

PD: no se puede? pues ese codigo de chekeo lo sake de este foro, creo recordar, lo q si es verdad es q no funciona... afú, q dificil esta esto TT.TT

PD2: En php se podria hacer? o.o

caricatos · #6 (**permalink**) 12/05/2008, 16:23

Hola:

Como no te expliques...

...

Código:

lo dicho niños,

Cada mensaje es una nueva "desorientación"... en lo que dije me reitero, y no es posible obtener datos del navegador/sistema del visitante (aunque pueda haber navegadores menos seguros)

LO que hayas sacado de estos foros, tal vez no sea cierto. Hay muchos participantes, y no todos dan respuestas adecuadas... esto es un foro donde se debaten muchas cosas y no podemos asegurar que todos los códigos/mensajes sean buenos.

En maestrosdelweb.com he puesto un artículo para chequear imágenes con ayuda de un lenguaje del servidor... tal vez te interese.

Saludos

Masane · #7 (**permalink**) 13/05/2008, 08:44

Cita:

Iniciado por caricatos

Hola:

Como no te expliques...

...

Código:

lo dicho niños,

Cada mensaje es una nueva "desorientación"... en lo que dije me reitero, y no es posible obtener datos del navegador/sistema del visitante (aunque pueda haber navegadores menos seguros)

LO que hayas sacado de estos foros, tal vez no sea cierto. Hay muchos participantes, y no todos dan respuestas adecuadas... esto es un foro donde se debaten muchas cosas y no podemos asegurar que todos los códigos/mensajes sean buenos.

En maestrosdelweb.com he puesto un artículo para chequear imágenes con ayuda de un lenguaje del servidor... tal vez te interese.

Saludos

q cada comentario mio es una nueva "desorientacion"? :S

Pero si esta bien claro lo q intento acer... Solo kiero q mi editor de textos (q lo unico q ace es agregar etiketas estilo BBCode al textarea), funcione en mozilla, xq no me esta pillando el texto seleccionado del textarea, pero en IE me funciona perfectamente....

Es eso, nada mas, no se q hay de raro en lo q e dicho, y lo de la imagen, lo are con php al validar el formulario...